您的位置：首页 > 其它

菜鸡日记001

2016-04-13 18:36 351 查看

.p{
width: 0;
height: 0;
border-bottom: 100px solid #f00;
border-top: 100px solid #00f;
border-right: 100px solid transparent;
border-radius:50px;
}

.p{
width: 150px;
height: 100px;
background: #f00;
border-radius: 50% / 50%;
}

.p{
width:  100px;
height: 10px;
background-color: #ff0;

border-left: 30px solid #0ff;
border-top: 100px solid #f00;
border-right: 30px solid #0f0;
border-radius: 50%;
}

.p{
width:  99px;
height: 99px;

border-left: 50px solid #f00;
border-top: 100px solid #00f;
border-right: 50px solid #f00;
border-radius: 50%;
}

.p{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #0f0;
position: relative;
margin: 50px 0px 0px 50px; /*↑→↓←*/
}
.p:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #ff0;
position: absolute;
content: "";
top: 30px;
left: -50px; /*边长的一半*/
}

.p {
margin: 80px 0;
border-right:  100px solid transparent;
border-bottom: 70px  solid #0f0;
border-left:   100px solid transparent;
width: 0px;
height: 0px; /*仅此大小不可省略*/
-moz-transform:    rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform:     rotate(35deg);
-o-transform:      rotate(35deg);
}
.p:before {
border-bottom: 80px solid #00f;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
top: -45px;
left: -62px; /*原代码中为-65*/
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform:    rotate(-35deg);
-ms-transform:     rotate(-35deg);
-o-transform:      rotate(-35deg); /*恢复旋转角度*/
}
.p:after {
border-right: 100px solid transparent;
border-bottom: 70px solid #f00;
border-left: 100px solid transparent;
position: absolute;
top: 3px;
left: -105px;
content: '';
-webkit-transform: rotate(-70deg);
-moz-transform:    rotate(-70deg);
-ms-transform:     rotate(-70deg);
-o-transform:      rotate(-70deg);
}

→

.p {
position: relative;
left: 100px;
width: 100px;
height: 90px;
}/*使用旋转原点配合旋转*/

.p:before, .p:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #f00;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%; /*左下*/
}

.p:after {
left: 0;
background: #00f;

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%; /*右下*/
}

Html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<p class="p">
　
</p>
</body>
</html>

总结:

*使用一些简单图形的叠加和变换来组成目标图形

需要加强对盒子模型的理解以及几个常用属性的记忆*

End

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航