Make various shapes with CSS3

One of the cool features of CSS3 is that it allows us to create a variety of rules and irregular shapes, which can reduce the use of images. Complex graphics that were previously only made in image-editing software such as Photoshop are now ready for use with CSS3. By using the new CSS properties, like transform and Border-radius, we can create very beautiful and complex graphic effects.

Circular

Circle Set the width and height equal when setting the CSS, then set the Border-radius property to half the width or height

#circle {    width:120px;    height:120px;    Background: #7fee1d;    -moz-border-radius:60px;    -webkit-border-radius:60px;    border-radius:60px;} <  ID= "Circle"></div>

Square

The square CSS style only needs to set the same width and height

#square {    width:120px;    height:120px;    Background: #f447ff;} <  ID= "Square"></div>

Rectangular

Unlike a square, the length and height of a rectangle are different values

#rectangle {    width:220px;    height:120px;    Background: #4da1f7;} <  ID= "Rectangle"></div>

Elliptic

When setting the ellipse's CSS, the height should be set to half the width, and the Border-radius property should be changed accordingly.

#oval {    width:200px;    height:100px;    Background: #e9337c;    -webkit-border-radius:100px/50px;    -moz-border-radius:100px/50px;    border-radius:100px/50px;} <  ID= "Oval"></div>

Triangle

To create a CSS triangle, you need to use the 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 transparent;    border-right:70px solid Transparent;} <  ID= "triangle"></div>

Inverted triangle

Unlike the positive triangles, the inverted triangles are set to the properties of the Border-top, Border-left, and border-right three edges. Also, when making triangles, the width and height are set to 0

#triangle {    width:0;    height:0;    border-top:140px solid #20a3bf;    border-left:70px solid transparent;    border-right:70px solid Transparent;}

Left Triangle

#triangle {    width:0;    height:0;    border-top:70px solid transparent;    border-right:140px solid #6bbf20;    border-bottom:70px solid Transparent;}

Right triangle

#triangle {    width:0;    height:0;    border-top:70px solid transparent;    border-left:140px solid #ff5a00;    border-bottom:70px solid Transparent;}

Rhombic

There are many ways to make a diamond. This is using the Transform property of the Rotate

#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;} <  ID= "Diamond"></div>

Parallelogram

Parallelogram is made by using the Transform property to tilt the rectangle to an angle

#parallelogram {    width:160px;    height:100px;    Background: #8734f7;    -webkit-transform:skew (30deg);    -moz-transform:skew (30deg);    -o-transform:skew (30deg);    Transform:skew (30deg);} <  ID= "Parallelogram"></div>

Star-shaped

The way the star is implemented is more complex, mainly by using the Transform property to rotate different edges

#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);}<DivID= "Star"></Div>

Hexagon star Shape

Unlike the pentagram, the hexagonal star shape is made by manipulating the border property to make two halves and then merging them

#star_six_points {    width:0;    height:0;    Display:block;    Position:absolute;    border-left:50px solid transparent;    border-right:50px solid transparent;    border-bottom:100px solid #de34f7;    margin:10px Auto;}  #star_six_points: After {    content: "";    width:0;    height:0;    Position:absolute;    border-left:50px solid transparent;    border-right:50px solid transparent;    border-top:100px solid #de34f7;     <  ID= "star_six_points"></div>

Pentagon

To create a CSS Pentagon you need to combine two graphs: a trapezoid, and then put a triangle on top of it, together to form a Pentagon

#pentagon {    width:54px;    position:relative;    border-width:50px 18px 0;    Border-style:solid;    Border-color: #277bab Transparent;}  #pentagon: Before {    content: "";    height:0;    width:0;    Position:absolute;    Top: -85px;    Left: -18px;    border-width:0 45px 35px;    Border-style:solid;    Border-color:transparent transparent #277bab;} <  ID= "Pentagon"></div>

Hexagon

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;} <  ID= "Hexagon"></div>

Octagonal

#octagon {    width:100px;    height:100px;    Background: #ac60ec;    position:relative;}  #octagon: Before {    content: "";    width:42px;    height:0;    Position:absolute;    top:0;    left:0;    BORDER-BOTTOM:29PX solid #ac60ec;    BORDER-LEFT:29PX solid #f4f4f4;    BORDER-RIGHT:29PX solid #f4f4f4;}  #octagon: After {    content: "";    width:42px;    height:0;    Position:absolute;    bottom:0;    left:0;    BORDER-TOP:29PX solid #ac60ec;    BORDER-LEFT:29PX solid #f4f4f4;    BORDER-RIGHT:29PX solid #f4f4f4;} <  ID= "Octagon"></div>

Heart shape

Heart-shaped production is very complex, you can use pseudo-elements to make, respectively, to rotate the pseudo-elements of different angles, and modify the Transform-origin attribute to the rotation center point of the element

#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%;} <DivID= "Heart"></Div>

Egg shape

A variant of the oval shape with a slightly larger height than the width of the egg, and the correct Border-radius property allows an egg shape to be created.

#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%;} <  ID= "Egg"></div>

Infinity symbol

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

<div id= "Infinity" ></div>

message box

The Message prompt box lets you make a rounded rectangle and then place a triangle where you want it.

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

<div id= "comment_bubble></div>

Pac Man

The way to make a bean-eater is to make a transparent triangle in a circle first.

#pacman {    width:0;    height:0;    border-right:70px solid transparent;    border-top:70px solid #ffde00;    border-left:70px solid #ffde00;    border-bottom:70px solid #ffde00;    border-top-left-radius:70px;    border-top-right-radius:70px;    border-bottom-left-radius:70px;    border-bottom-right-radius:70px;} <  ID= "Pacman"></div>

Make various shapes with CSS3