16 Angular shape
Copy Code code as follows:
#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;
}
2 Pentagram
Copy Code code as follows:
#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: ';
}
35 Side shape
Copy Code code as follows:
#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;
}
4 Hexagon
Copy Code code as follows:
#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;
}
5 polygon
Copy Code code as follows:
#octagon {
width:100px;
height:100px;
background:red;
position:relative;
}
#octagon: Before {
Content: "";
Position:absolute;
top:0;
left:0;
BORDER-BOTTOM:29PX solid red;
BORDER-LEFT:29PX solid #eee;
BORDER-RIGHT:29PX solid #eee;
width:42px;
height:0;
}
#octagon: After {
Content: "";
Position:absolute;
bottom:0;
left:0;
BORDER-TOP:29PX solid red;
BORDER-LEFT:29PX solid #eee;
BORDER-RIGHT:29PX solid #eee;
width:42px;
height:0;
}
6 Heart Shape
Copy Code code as follows:
#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%;
}
