CSS样式画各种图形

下面是一些我在 CSS 中经常用到的图案,还有一些是在css-tricks看到的。记录一下,以后会用到。
会持续更新…

一、常用

三角形

上三角

1
2
3
4
5
6
7
#triangle{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;
}

下三角

1
2
3
4
5
6
7
#triangle{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid red;
}

左三角

1
2
3
4
5
6
7
#triangle{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:100px solid red;
}

右三角

1
2
3
4
5
6
7
#triangle{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:100px solid red;
}

左上三角

1
2
3
4
5
6
#triangle{
width:0;
height:0;
border-top:100px solid transparent;
border-right:100px solid transparent;
}

右上三角

1
2
3
4
5
6
#triangle{
width:0;
height:0;
border-top:100px solid transparent;
border-left:100px solid transparent;
}

左下三角

1
2
3
4
5
6
#triangle{
width:0;
height:0;
border-bottom:100px solid transparent;
border-right:100px solid transparent;
}

右下三角

1
2
3
4
5
6
#triangle{
width:0;
height:0;
border-bottom:100px solid transparent;
border-left:100px solid transparent;
}

梯形

1
2
3
4
5
6
7
#trapezoid{
width:100px;
height:0;
border-bottom:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}

六角星

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#star-six {
width: 0;
height: 0;
position: relative;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#star-six:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 33px; // 1/3
left: -50px; // 1/2
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

你会发现所有的三角形,梯形等都是通过border来控制的,如下,只需要将不想显示的边框颜色设置为透明(transparent)的即可。


1
2
3
4
5
6
7
8
div{
width:0px;
height:0px;
border-left:50px solid #060;
border-right:50px solid #600;
border-bottom:50px solid #f00;
border-top:50px solid #00f;
}

一个div解决不了,还有:before,’:after’伪元素

平行四边形

1
2
3
4
5
6
7
8
#parallelogram{
width:200px;
height:100px;
background-color:red;
transform:skew(20deg);
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg)
}

圆形

1
2
3
4
5
6
7
8
#circle{
width:100px;
height:100px;
background-color:red;
border-radius:50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

同心圆

1
2
3
4
5
6
7
8
9
#circle{
width: 100px;
height: 100px;
border:20px solid red;
background: #6495ED;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}

上半圆

1
2
3
4
5
6
7
8
9
10
#circle-top{
width: 100px;
height: 0;
-moz-border-radius: 100px 100px 0 0;
-webkit-border-radius: 100px 100px 0 0;
border-radius: 100px 100px 0 0;
border: 0 solid transparent;
border-top: 100px solid red;
border-right: 100px solid red;
}

下半圆

1
2
3
4
5
6
7
8
9
10
#circle-bottom{
width: 100px;
height: 0;
-moz-border-radius: 0 0 100px 100px;
-webkit-border-radius: 0 0 100px 100px;
border-radius: 0 0 100px 100px;
border: 0 solid transparent;
border-bottom: 100px solid red;
border-right: 100px solid red;
}

左半圆

1
2
3
4
5
6
7
8
9
10
#circle-left{
width: 100px;
height: 0;
-moz-border-radius: 100px 0 0 100px;
-webkit-border-radius: 100px 0 0 100px;
border-radius: 100px 0 0 100px;
border: 0 solid transparent;
border-bottom: 100px solid red;
border-top: 100px solid red;
}

右半圆

1
2
3
4
5
6
7
8
9
10
#circle-right{
width: 100px;
height: 0;
-moz-border-radius: 0 100px 100px 0;
-webkit-border-radius: 0 100px 100px 0;
border-radius: 0 100px 100px 0;
border: 0 solid transparent;
border-bottom: 100px solid red;
border-top: 100px solid red;
}

左上1/4圆

1
2
3
4
5
6
7
8
9
#circle-lefttop{
width: 100px;
height: 0px;
border: 0 solid transparent;
border-top: 100px solid red;
-moz-border-radius: 100px 0 0 0;
-webkit-border-radius: 100px 0 0 0;
border-radius: 100px 0 0 0;
}

右上1/4圆

1
2
3
4
5
6
7
8
9
#circle-righttop{
width: 100px;
height: 0px;
border: 0 solid transparent;
border-top: 100px solid red;
-moz-border-radius: 0 100px 0 0;
-webkit-border-radius: 0 100px 0 0;
border-radius: 0 100px 0 0;
}

左下1/4圆

1
2
3
4
5
6
7
8
9
#circle-leftbottom{
width: 100px;
height: 0px;
border: 0 solid transparent;
border-bottom: 100px solid red;
-moz-border-radius: 0 0 0 100px;
-webkit-border-radius: 0 0 0 100px;
border-radius: 0 0 0 100px;
}

右下1/4圆

1
2
3
4
5
6
7
8
9
#circle-rightbottom{
width: 100px;
height: 0px;
border: 0 solid transparent;
border-bottom: 100px solid red;
-moz-border-radius: 0 0 100px 0;
-webkit-border-radius: 0 0 100px 0;
border-radius: 0 0 100px 0;
}

进阶

气泡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#pop{
width:200px;
height:100px;
position:relative;
margin:10px 0 50px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
background:red;
}
#pop:after{
content: '';
width: 50px;
height: 50px;
position: absolute;
top: 70px;
left: 45px;
border: 0 solid transparent;
border-bottom: 35px solid red;
-moz-border-radius: 0 0 0 200px;
-webkit-border-radius: 0 0 0 50px;
border-radius: 0 0 0 50;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}

未完待续….

坚持原创技术分享,您的支持将鼓励我继续创作!