CSS3 making various shape images

Round-oval-triangle-inverted triangle = Left triangle-Right triangle-diamond-parallelogram-star-six angle star-pentagon-hexagon-octagonal shape-heart-egg-infinity symbol-Message prompt box

No nonsense direct HTML Interface (pro-Test)------turn from Baidu experience http://jingyan.baidu.com/article/e52e36154226ef40c70c5148.html

<! DOCTYPE html>
<meta charset= "Utf-8";
<title>css3 drawing </ Title>
<style media= "screen";
div{
Text-align:center;
Display:inline-block;
Margin-left : 20px;
}
#circle {/* circle to set the width and height equal when setting up the CSS, then set the Border-radius property to half the width or height: */
width:120px;
height:120px;
Background: #7fee1d;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius:60px;
}
/* When setting the oval CSS, the height is set to half the width, and the Border-radius property is changed accordingly: */
#oval {
width:200px;
height:100px;
Background: #e9337c;
-webkit-border-radius:100px/50px;
-moz-border-radius:100px/50px;
border-radius:100px/50px;
}
/* To create a CSS triangle, you need to use border, by setting the transparency of the different edges, we can make the status of the triangle.
also, when making triangles, the width and height are set to 0. */
#triangle {
width:0;
height:0;
border-bottom:140px solid #fcf921;
border-left:70px Solid TRANSP arent;
border-right:70px solid Transparent;
}

/* Unlike a positive triangle, the inverted triangle is set to the properties of the Border-top, Border-left, and border-right three edges: */
#triangleDown {
width:0;
height:0;
border-top:140px solid #20a3bf;
border-left:70px solid Transparent;
border-right:70px solid Transparent;
}

/* The Left Triangle operates on properties of the Border-top, Border-left, and border-right three edges, with the top and bottom set transparent properties. */
#triangle_left {
width:0;
height:0;
border-top:70px solid Transparent;
border-right:140px solid #6bbf20;
border-bottom:70px solid Transparent;
}

/* There are many ways to make a diamond. Here, the transform attribute is combined with the rotate to make the two positive and negative triangles appear up and down. */
#diamond {
width:120px;
height:120px;
Background: #1eff00;
/* Rotate */
-webkit-transform:rotate ( -45DEG);
-moz-transform:rotate ( -45DEG);
-ms-transform:rotate ( -45DEG);
-o-transform:rotate ( -45DEG);
Transform:rotate ( -45DEG);
/* Rotate Origin */
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
Transform-origin:0 100%;
margin:60px 0 10px 310px;
}

/* Trapezoid is a variant of the triangle, when setting the CSS ladder, the left and right two edges are set to equal, and set a width for it. */
#trapezium {
height:0;
width:120px;
border-bottom:120px solid #ec3504;
border-left:60px solid Transparent;
border-right:60px solid Transparent;
}

/* Parallelogram is made by using the Transform property to tilt the rectangle an angle. */
#parallelogram {
width:160px;
height:100px;
Background: #8734f7;
-webkit-transform:skew (30DEG);
-moz-transform:skew (30DEG);
-o-transform:skew (30DEG);
Transform:skew (30DEG);
}

/* The star-shaped HTML structure also uses an empty div with an ID. The way the star is implemented is more complex, mainly by using the Transform property to rotate different edges. Carefully understand the following code. */
#star {
width:0;
height:0;
margin:50px 0;
Color: #fc2e5a;
position:relative;
Display:block;
border-right:100px solid Transparent;
border-bottom:70px solid #fc2e5a;
border-left:100px solid Transparent;
-moz-transform:rotate (35DEG);
-webkit-transform:rotate (35DEG);
-ms-transform:rotate (35DEG);
-o-transform:rotate (35DEG);
}

#star: Before {
height:0;
width:0;
Position:absolute;
Display:block;
Top: -45px;
Left: -65px;
border-bottom:80px solid #fc2e5a;
border-left:30px solid Transparent;
border-right:30px solid Transparent;
Content: ";
-webkit-transform:rotate ( -35DEG);
-moz-transform:rotate ( -35DEG);
-ms-transform:rotate ( -35DEG);
-o-transform:rotate ( -35DEG);
}

#star: After {
Content: ";
width:0;
height:0;
Position:absolute;
Display:block;
top:3px;
Left: -105px;
Color: #fc2e5a;
border-right:100px solid Transparent;
border-bottom:70px solid #fc2e5a;
border-left:100px solid Transparent;
-webkit-transform:rotate ( -70DEG);
-moz-transform:rotate ( -70DEG);
-ms-transform:rotate ( -70DEG);
-o-transform:rotate ( -70DEG);
}

*/* Hexagon can be made in many ways, like Pentagon, first make a rectangle, and then put a triangle above and below it. */
#hexagon {
width:100px;
height:55px;
Background: #fc5e5e;
position:relative;
margin:10px Auto;
}

#hexagon: Before {
Content: "";
width:0;
height:0;
Position:absolute;
Top: -25px;
left:0;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-bottom:25px solid #fc5e5e;
}

#hexagon: After {
Content: "";
width:0;
height:0;
Position:absolute;
Bottom: -25px;
left:0;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-top:25px solid #fc5e5e;
}

/* Heart-shaped production is very complex, you can use pseudo-elements to make, respectively, the pseudo-element rotation of different angles,
and modify the Transform-origin property to the center point of the element's rotation. */
#heart {
position:relative;
}

#heart: Before, #heart: after {
content: "";
width:70px;
height:115px;
Position:absolute;
Background:red;
left:70px;
top:0;
-webkit-border-radius:50px 50px 0 0;
-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%;
}

/* A variant of the oval ellipse that has a slightly higher height than the width and sets the correct Border-radius property to create an egg shape. */
#egg {
width:136px;
height:190px;
Background: #ffc000;
Display:block;
-webkit-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

/* The infinity symbol can be achieved by border the property and setting the angle of the pseudo-element. */
#infinity {
width:220px;
height:100px;
position:relative;
}

#infinity: Before, #infinity: after {
Content: "";
width:60px;
height:60px;
Position:absolute;
top:0;
left:0;
border:20px solid #06c999;
-moz-border-radius:50px 50px 0;
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);
}

The

/* message prompt box allows you to make a rounded rectangle and then place a triangle where needed. */
#comment_bubble {
width:140px;
height:100px;
background: #088cb7;
Position:relative;
- moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}

#comment_bubble: Before {
content: "";
width:0;
height:0;
right:100%;
top:38px;
Position:absolute;
border-top:13px solid Transparent;
Border-right:26px solid #088cb7;
border-bottom:13px solid Transparent;
}
</style>
<body>
<div id= "Circle" > Round </div>
<div id= "Oval" > Oval </div>
<div id= "triangle" > Positive triangle </div>
<div id= "Triangledown" > Inverted triangle </ Div>
<div id= "Triangle_left" > Left triangle </div>
<div id= "Diamond" > Diamond </div>
<div ID = "Trapezium" > trapezoidal </div>
<div id= "Parallelogram" > Parallelogram </div>
<div id= "star" > Star < /div>
<div id= "hexagon" style= "margin-top:30px" > Hexagon </div>
<div id= "Heart" > Heart-shaped </div
<div id= "egg" > Egg-shaped </div>
<div id= "Infinity" > Infinity symbol </div>
<div id= "Comment_ Bubble "> Message prompt box </div>

</body>

CSS3 making various shape images