CSS implementation fillet, triangle, pentagram, Pentagon, Love, 12 Point star, 8 Star, Circle, ellipse, circle, gossip, etc.

1. Rectangle

#Rectangle {

width:200px;
height:50px;
background-color:red;
Color:white;
Text-align:center;

}

2. Square

#square {
width:200px;
height:200px;
background-color:red;
Color:white;
Text-align:center;
}

3. Solid Circle

#perfect-circle{
width:200px;
height:200px;
background-color:red;
Color:white;
Text-align:center;
border-radius:100px;
/*-webkit-border-radius:100px;*/
-moz-border-radius:100px;
}

4. Circle

#circle {
width:200px;
height:200px;
Background-color:white;
Color:black;
Text-align:center;
border-radius:100px;
/*-webkit-border-radius:10px;*/
/*-moz-border-radius:100px;*/
BORDER:3PX Red Solid;
}

5. Ellipse

#ellipse {
width:200px;
height:100px;
background-color:red;
Color:white;
Text-align:center;
border-radius:100px/50px;
/*-webkit-border-radius:100px/50px;*/
/*-moz-border-radius:100px/50px;*/
}

6. Upper Triangle

#triangle-up{
width:0px;
height:0px;
Color:white;
Text-align:center;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-bottom:100px solid red;
/*-webkit-border-top-left-radius:50px Solid transparent;*/
/*-webkit-border-top-right-radius:50px Solid transparent;*/
/*-webkit-border-bottom-left-radius:100px Solid red;*/
/*-webkit-border-bottom-right-radius:100px Solid red;*/
}

7. Lower Triangle

#triangle-down{
width:0px;
height:0px;
Color:white;
Text-align:center;
border-top:100px solid red;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
}

8. Left Triangle

#triangle-left{
width:0px;
height:0px;
Color:white;
Text-align:center;
border-top:50px solid Transparent;
border-left:100px solid red;
border-bottom:50px solid Transparent;
}

9. Right Triangle

#triangle-right{
width:0px;
height:0px;
Color:white;
Text-align:center;
border-top:50px solid Transparent;
border-right:100px solid red;
border-bottom:50px solid Transparent;
}

10. Top Left

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

11. Top Right

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

12. Bottom Left

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

13. Bottom Right

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

14. Parallelogram

#parallelogram {
width:200px;
height:150px;
margin-left:30px;
-webkit-transform:skew ( -30DEG);
-moz-transform:skew (200DEG);
-o-transform:skew (200DEG);
background-color:red;
}

15.

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

}

#star-five{
width:0;
height:0;
color:red;
margin:50px 0;
position:relative;
Display:block;
border-left:100px solid Transparent;
border-right:100px solid Transparent;
border-bottom:70px solid red;
-moz-transfrom:rotate (35DEG);
-webkit-transform:rotate (35DEG);
-ms-transform:rotate (35DEG);
-o-transform:rotate (35DEG);
}

#star-five:before{
width:0;
height:0;
border-left:30px solid Transparent;
border-right:30px solid Transparent;
border-bottom:80px solid red;
Position:absolute;
Top: -45px;
Left: -65px;
Color:white;
Display:block;
content: "";
-moz-transform:rotate ( -35DEG);
-webkit-transform:rotate ( -35DEG);
-ms-transform:rotate ( -35DEG);
-o-transform:rotate ( -35deg);  
}
#star-five:after{
width:0;
height:0;
Display:block;
Position:absolute;
Color:red;
top:3px;
Left: -105px;
border-left:100px solid Transparent;
border-right:100px solid Transparent;
border-bottom:70px solid red;
content: "";
-moz-transform:rotate ( -70DEG);
-webkit-transform:rotate ( -70DEG);
-ms-transform:rotate ( -70DEG);
-o-transform:rotate ( -70DEG);
}

#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-top:100px solid red;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
Position:absolute;
Content: "";
top:30px;
Left: -50px;
}

#pentagon {
width:54px;
position:relative;
border-width:50px 18px 0;
Border-style:solid;
Border-color:red Transparent;
}
#pentagon: before{
Content: "";
Position:absolute;
width:0;
height:0;
Top: -85px;
Left: -18px;
border-width:0 45px 35px;
Border-style:solid;
Border-color:transparent Transparent red;
}

. #hexagon {
width:100px;
height:55px;
Background-color:red;
Position:relative;
}
#hexagon: before{
Content: "";
Position:absolute;
Top: -25px;
left:0;
width:0;
Height:;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-bottom:25px solid red;
}
#hexagon: after{
Content: "";
left:0;
width:0;
height:0;
Bottom: -25px;
Position:absolute;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-top:25px solid red;
}

#octagon {
width:100px;
height:100px;
background-color:red;
position:relative;
}
#octagon: before{
width:42px;
height:0;
top:0;
left:0;
Position:absolute;
Content: "";
BORDER-LEFT:29PX solid #eee;
BORDER-RIGHT:29PX solid #eee;
BORDER-BOTTOM:29PX solid red;
}
#octagon: after{
width:42px;
height:0;
left:0;
bottom:0;
Position:absolute;
Content: "";
BORDER-LEFT:29PX solid #eee;
BORDER-RIGHT:29PX solid #eee;
BORDER-TOP:29PX solid red;
}

#heart {
width:100px;
height:90px;
position:relative;
}
#heart: Before, #heart: after{
width:50px;
height:80px;
left:50px;
top:0;
background-color:red;
Position:absolute;
Content: "";
-moz-border-radius:50px 50px 0 0;
border-radius:50px 50px 0 0;
-webkit-transform:rotate ( -45DEG);
-ms-transform:rotate ( -45DEG);
-moz-transform:rotate ( -45DEG);
-o-transform:rotate ( -45DEG);
Transform:rotate ( -45DEG);
-webkit-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-o-transform-origin:0 100%;
tansform-origin:0 100%;
}
#heart: after{
left:0;
-webkit-transform:rotate (45DEG);
-ms-transform:rotate (45DEG);
-moz-transform:rotate (45DEG);
-o-transform:rotate (45DEG);
Transform:rotate (45DEG);
-webkit-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
}

#infinity {
width:212px;
height:100px;
position:relative;
}
#infinity: Before, #infinity: after{
width:60px;
height:60px;
top:0;
left:0;
border:20px solid red;
Position:absolute;
Content: "";
border-radius:50px 50px 0 50px;
-webkit-border-radius:50px 50px 0 50px;
-moz-border-radius:50px 50px 0 50px;
Transform:rotate ( -45DEG);
-webkit-transform:rotate ( -45DEG);
-ms-transform:rotate ( -45DEG);
-moz-transform:rotate ( -45DEG);
-o-transform:rotate ( -45DEG);
}
#infinity: after{
Left:auto;
right:0;
border-radius:50px 50px 50px 0;
-webkit-border-radius:50px 50px 50px 0;
-moz-border-radius:50px 50px 50px 0;
Transform:rotate (45DEG);
-webkit-transform:rotate (45DEG);
-moz-transform:rotate (45DEG);
-ms-transform:rotate (45DEG);
-o-transform:rotate (45DEG);
}

#egg {
width:126px;
height:180px;
background-color:red;
Display:block;
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
/*-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;*/
}

#pacman {
width:0;
height:0;
border-right:60px solid Transparent;
border-left:60px solid red;
border-top:60px solid red;
border-bottom:60px solid red;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:60px;
border-bottom-right-radius:60px;
}

. #talkbubble {
width:200px;
height:100px;
Background-color:red;
Position:relative;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
}
#talkbubble: before{
width:0;
height:0;
right:100%;
top:30px;
Position:absolute;
content: "";
border-top:15px solid Transparent;
border-right:30px solid red;
border-bottom:15px solid Transparent;
}

#burst -12{
width:80px;
height:80px;
Background-color:red;
Position:relative;
Text-align:center;
}
#burst -12:before, #burst -12:after{
width:80px;
height:80px;
top:0;
left:0;
Background-color:red;
Position:absolute;
content: "";
}
#burst -12:before{
Transform:rotate (30deg);
-webkit-transform:rotate (30DEG);
-ms-transform:rotate (30deg);
-moz-transform:rotate (30deg);
-o-transform:rotate (30deg);
}
#burst -12:after{
Transform:rotate (60deg);
-webkit-transform:rotate (60DEG);
-ms-transform:rotate (60DEG);
-moz-transform:rotate (60DEG);
-o-transform:rotate (60DEG);
}

#burst -8{
width:80px;
height:80px;
Background-color:red;
Text-align:center;
Position:relative;
Transform:rotate (20DEG);
-webkit-transform:rotate (20DEG);
-ms-transform:rotate (20DEG);
-moz-transform:rotate (20DEG);
-o-transform:rotate (20DEG);
}
#burst -8:before{
width:80px;
height:80px;
top:0;
left:0;
Background-color:red;
Position:absolute;
content: "";
Transform:rotate (135DEG);
-webkit-transform:rotate (135DEG);
-ms-transform:rotate (135DEG);
-moz-transform:rotate (135DEG);
-o-transform:rotate (135DEG);
}

. #diamond {
width:50px;
height:0;
Border-style:solid;
Border-color:transparent transparent red transparent;
border-width:0 25px 25px 25px;
Position:relative;
margin:20px 0 50px 0;
}
#diamond: after{
width:0;
height:0;
top:25px;
Left: -25px;
Border-style:solid;
border-color:red transparent transparent transparent;
border-width:70px 50px 0 50px;
Position:absolute;
content: "";
}

#yin-yang{
width:96px;
height:48px;
Background-color: #fff;
border-color:red;
Border-style:solid;
border-width:2px 2px 50px 2px;
border-radius:100%;
position:relative;
}
#yin-yang:before {
width:12px;
height:12px;
top:50%;
left:0;
Content: "";
Position:absolute;
Background-color: #fff;
border:18px solid red;
border-radius:100%;
}
#yin-yang:after {
width:12px;
height:12px;
top:50%;
left:50%;
background-color:red;
border:18px solid #fff;
border-radius:100%;
Content: "";
Position:absolute;
}

CSS implementation fillet, triangle, pentagram, Pentagon, Love, 12 Point star, 8 Star, Circle, ellipse, circle, gossip, etc.