css3制作各类图形（一）

php中文网

发布时间：2016-09-05 08:45:38

1332人浏览过

来源于php中文网

原创

1、Square

#square { 
width: 100px; 
height: 100px; 
background: red; }

2、Rectangle

#rectangle { 
width: 200px; 
height: 100px; 
background: red; }

3、Circle

#circle {
 width: 100px; 
height: 100px; 
background: red; 
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; border-radius: 50px; }
 /* Cleaner, but slightly less support: use "50%" as value */

4、Oval

立即学习“前端免费学习笔记（深入）”；

#oval { 
width: 200px; 
height: 100px; 
background: red; 
-moz-border-radius: 100px / 50px; 
-webkit-border-radius: 100px / 50px; 
border-radius: 100px / 50px; } 
/* Cleaner, but slightly less support: use "50%" as value */

5、Triangle Up

#triangle-up { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; }

6、Triangle Down

#triangle-down { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid red; }

7、Triangle Left

#triangle-left { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-right: 100px solid red; 
border-bottom: 50px solid transparent; }

8、Triangle Right

#triangle-right { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-left: 100px solid red; 
border-bottom: 50px solid transparent; }

9、Triangle Top Left

Playground

Playground 是一个AI绘画创作和图片编辑平台，每天可以免费创建100张各种类型的艺术图片，还提供背景消除、局部更换等图片编辑工具

下载

#triangle-topleft { 
width: 0; 
height: 0; 
border-top: 100px solid red; 
border-right: 100px solid transparent; }

10、Triangle Top Right

#triangle-topright { 
width: 0; 
height: 0; 
border-top: 100px solid red; 
border-left: 100px solid transparent; }

11、Triangle Bottom Left

#triangle-bottomleft { 
width: 0; 
height: 0; 
border-bottom: 100px solid red; 
border-right: 100px solid transparent; }

12、Triangle Bottom Right

#triangle-bottomright { 
width: 0; 
height: 0; 
border-bottom: 100px solid red; 
border-left: 100px solid transparent; }

13、Curved Tail Arrow

#curvedarrow { 
position: relative;
 width: 0;
 height: 0; border-top: 9px solid transparent;
 border-right: 9px solid red; 
-webkit-transform: rotate(10deg);
 -moz-transform: rotate(10deg); 
-ms-transform: rotate(10deg);
 -o-transform: rotate(10deg); 
} 
#curvedarrow:after { 
content: ""; 
position: absolute;
 border: 0 solid transparent; 
border-top: 3px solid red; 
border-radius: 20px 0 0 0; 
top: -12px; 
left: -9px; 
width: 12px; 
height: 12px; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); }

14、Trapezoid

#trapezoid { 
border-bottom: 100px solid red; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
height: 0; 
width: 100px; }

15、Parallelogram

#parallelogram { 
width: 150px; 
height: 100px; 
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg); 
background: red; }

16、Star (6-points)

#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; }

17、Star (5-points)

#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: ''; }

18、Pentagon

#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; }