欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css3制作各类图形(一)

程序员文章站 2022-04-11 09:49:45
...

1、Square

css3制作各类图形(一)

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

2、Rectangle

css3制作各类图形(一)

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

3、Circle

css3制作各类图形(一)

#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

css3制作各类图形(一)

#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

css3制作各类图形(一)

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

6、Triangle Down

css3制作各类图形(一)

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

7、Triangle Left

css3制作各类图形(一)

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

8、Triangle Right

css3制作各类图形(一)

#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

css3制作各类图形(一)

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

10、Triangle Top Right

css3制作各类图形(一)

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

11、Triangle Bottom Left

css3制作各类图形(一)

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

12、Triangle Bottom Right

css3制作各类图形(一)

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

13、Curved Tail Arrow

css3制作各类图形(一)

#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

css3制作各类图形(一)

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

15、Parallelogram

css3制作各类图形(一)

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

16、Star (6-points)

css3制作各类图形(一)

#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)

css3制作各类图形(一)

#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

css3制作各类图形(一)

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