用CSS代码写出的各种形状图形的方法
2012-08-17 16:39
676 查看
一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码。整合了一下,有错误欢迎指出。
1.正方形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/c1ae0f74481855525836b3e9776896b5.png)
#square {
width: 100px;
height: 100px;
background: red;}
2.长方形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/40f2236e61827fb146dcac877a00f9ec.jpg)
#rectangle {
width: 200px;
height: 100px;
background: red;}
3.左上三角
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/03463ec64944e8876394af97c6a82c40.png)
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
4.右上三角
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/3c850e926c72e5d800d1011e398f89e8.png)
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;}
5.左下三角
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/7932898d8ec6f3bc56ad67fd6c30fea2.png)
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
6.右下三角
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/e6d5e6e4600a44cd8b06b8d76b7ba264.png)
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
7.平行四边形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/8737349c426090ba4d74878895821033.png)
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
8.梯形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/0502d356382fb3519cbfabde17a79bbc.png)
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
9.六角星
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/765cd8bbac2c5aa9ab13754405ea9453.png)
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
10.五角星
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/15fbb5badcb4a83223b41132aff00a8d.png)
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
11.五边形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/2bb28f6096e68c6be5aa7d460a6259f7.png)
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
12.六边形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/0fbc14285fcec58dd116d235d9697b8a.png)
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
13.桃心
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/75fe0a152f77a8b845919c1429a7d48b.png)
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-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%;
}
#heart:after {
left: 0;
-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%;
}
14。无限大符号
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/382f7c2dc2183971409e52acd67565d8.png)
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
15.蛋
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/066549fecf0088d520819d4160a0a510.png)
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
16.提示对话框
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/cf7705d6c21fbd8eae0a45fe3bd1753b.png)
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
17.十二角星
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/ab092dde4589dcc655e9e05abf1f21e8.png)
#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
18.八角星
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/cdc9f17482a9aa551f1f1d2699d476e3.png)
#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
19.钻石
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/0804c5a6faa9d7ace8d0de331ffd409a.png)
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
20.八卦
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/7ee9b58276335e6f2d2fe7c71d1c77d7.png)
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
1.正方形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/c1ae0f74481855525836b3e9776896b5.png)
#square {
width: 100px;
height: 100px;
background: red;}
2.长方形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/40f2236e61827fb146dcac877a00f9ec.jpg)
#rectangle {
width: 200px;
height: 100px;
background: red;}
3.左上三角
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/03463ec64944e8876394af97c6a82c40.png)
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
4.右上三角
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/3c850e926c72e5d800d1011e398f89e8.png)
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;}
5.左下三角
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/7932898d8ec6f3bc56ad67fd6c30fea2.png)
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
6.右下三角
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/e6d5e6e4600a44cd8b06b8d76b7ba264.png)
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
7.平行四边形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/8737349c426090ba4d74878895821033.png)
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
8.梯形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/0502d356382fb3519cbfabde17a79bbc.png)
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
9.六角星
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/765cd8bbac2c5aa9ab13754405ea9453.png)
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
10.五角星
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/15fbb5badcb4a83223b41132aff00a8d.png)
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
11.五边形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/2bb28f6096e68c6be5aa7d460a6259f7.png)
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
12.六边形
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/0fbc14285fcec58dd116d235d9697b8a.png)
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
13.桃心
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/75fe0a152f77a8b845919c1429a7d48b.png)
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-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%;
}
#heart:after {
left: 0;
-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%;
}
14。无限大符号
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/382f7c2dc2183971409e52acd67565d8.png)
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
15.蛋
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/066549fecf0088d520819d4160a0a510.png)
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
16.提示对话框
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/cf7705d6c21fbd8eae0a45fe3bd1753b.png)
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
17.十二角星
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/ab092dde4589dcc655e9e05abf1f21e8.png)
#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
18.八角星
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/cdc9f17482a9aa551f1f1d2699d476e3.png)
#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
19.钻石
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/0804c5a6faa9d7ace8d0de331ffd409a.png)
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
20.八卦
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/7ee9b58276335e6f2d2fe7c71d1c77d7.png)
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
相关文章推荐
- 【转】用CSS代码写出的各种形状图形的方法
- CSS代码实例:用CSS代码写出的各种形状图形
- CSS代码实例:用CSS代码写出的各种形状图形
- 教你用CSS代码写出的各种形状图形
- CSS代码写出的各种形状图形
- CSS代码实例:用CSS代码写出的各种形状图形
- 纯 CSS 创建各种不同的图形形状
- CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)
- css代码写出不同规则的图形
- 5种方法立刻写出更好的CSS代码(转载)
- 5种方法立刻写出更好的CSS代码
- 5种方法立刻写出更好的CSS代码(转载)
- 5种方法立刻写出更好的CSS代码
- 5种方法立刻写出更好的CSS代码
- 基于纯CSS创建各种图形形状
- 黄聪:如何写出兼容性强的CSS代码,适应各种浏览器:IE、火狐等
- 5种方法立刻写出更好的CSS代码
- 纯 CSS 创建各种不同的图形形状
- 5种方法立刻写出更好的CSS代码
- 5种方法立刻写出更好的CSS代码