CSS 32 graphics effects [trapezoidal | triangular | ellipse | parallelogram | diamond | one-fourth |

Reprint Link: http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet

In front of the "graphic effect of pure css", the article introduced 16 kinds of CSS to draw various different graphics methods. It took a little time today to make a list of this, so that we can find a place to look for emergencies. Not much else to say, look directly at the code.

In order to save time, the following graphic is a label, can be a block element can also be an inline element, but the inline elements need to add "display:block;", the only difference is that there are different class names to distinguish, related class name I put in the back of the title, So that everyone can view the map. 1, Square:

CSS Code:

. square {
    width:100px;
    height:100px;
    Background: #E5C3B2;
}

The method above is to set the width and height consistent to achieve the square effect, the following shows a boder to make a square effect:

. square {
    width:0;
    height:0;
    border:50px solid  #E5C3B2;/* Border size equals half of square width (or height) */
}

Effect:

2, Parallelogram (parallelogram)

CSS Code:

. parallelogram {
    width:100px;
    height:70px;
    -webkit-transform:skew (20deg);
    -moz-transform:skew (20deg);
    -o-transform:skew (20deg);
    -ms-transform:skew (20deg);
    Transform:skew (20deg);
    Background: #E5C3B2;
}

Effect:

We can control the angle by the value size of "skew", and if its value is negative, it will change the direction of the twist:

. parallelogram2 {
	width:100px;
	height:70px;
	-webkit-transform:skew ( -20deg);
	-moz-transform:skew ( -20deg);
	-o-transform:skew ( -20deg);
	-ms-transform:skew ( -20deg);
	Transform:skew ( -20deg);
	Background: #E5C3B2;
}

Effect:

3. Rhombus (Diamond)

CSS Code:

. diamond {
	width:80px;
	height:80px;
	margin:40px 0 0 40px;
	-webkit-transform-origin:0 100%;
	-moz-transform-origin:0 100%;
	-o-transform-origin:0 100%;
	-ms-transform-origin:0 100%;
	transform-origin:0 100%;
	-webkit-transform:rotate ( -45deg);
	-moz-transform:rotate ( -45deg);
	-o-transform:rotate ( -45deg);
	-ms-transform:rotate ( -45deg);
	Transform:rotate ( -45deg);
	Background: #E5C3B2;
}

Effect:

4. Rectangle ()

CSS Code:

. rectangle {
	width:100px;
	height:50px;
	Background: #E5C3B2;
}

Effect:

5, trapezoid (trapezoid)

trapezoid One

CSS Code:

. trapezoid-1 {
	height:0;
	width:100px;
	border-bottom:100px solid #e5c3b2;
	border-left:60px solid transparent;
	border-right:60px solid transparent;
}

Effect:

Ladder Two

CSS Code:

. trapezoid-2 {
	height:0;
	width:100px;
	border-top:100px solid #e5c3b2;
	border-left:60px solid transparent;
	border-right:60px solid transparent;
}

Effect:

trapezoid three

CSS Code:

. trapezoid-3 {
	height:100px;
	width:0;
	border-right:100px solid #e5c3b2;
	border-top:60px solid transparent;
	border-bottom:60px solid transparent;
}

Effect:

Ladder Four

CSS Code:

. trapezoid-4 {
	height:100px;
	width:0;
	border-left:100px solid #e5c3b2;
	border-top:60px solid transparent;
	border-bottom:60px solid transparent;
}

Effect:

6. Triangle (triangle)

triangular facing up

CSS Code:

. triangle-up {
	height:0;
	width:0;
	border:50px solid #e5c3b2;
	Border-color:transparent transparent #e5c3b2 transparent;
}

Effect:

Triangle facing right

CSS Code:

. triangle-rihgt {
	height:0;
	width:0;
	border:50px solid #e5c3b2;
	Border-color:transparent  Transparent transparent #e5c3b2;
}

Effect:

triangle facing down

CSS Code:

. triangle-down {
	height:0;
	width:0;
	border:50px solid #e5c3b2;
	Border-color: #e5c3b2 transparent  transparent transparent;
}

Effect:

triangle facing left

CSS Code:

. triangle-left {
	height:0;
	width:0;
	border:50px solid #e5c3b2;
	Border-color:transparent #e5c3b2 transparent transparent;
}

Effect:

7, Semi-circle (semicircle)

Upper Semicircle

CSS Code:

. semicircle-top {
	background: #e5c3b2;
	height:25px;
	width:50px;
	-moz-border-radius:50px 50px 0 0;
	-webkit-border-radius:50px 50px 0 0;
	border-radius:50px 50px 0 0;
}

Effect:

Right semicircle

CSS Code:

. semicircle-right {
	background: #e5c3b2;
	height:50px;
	width:25px;
	-moz-border-radius:0 0px 50px 0;
	-webkit-border-radius:0 50px 50px 0;
	border-radius:0 50px 50px 0;
}

Effect:

Lower semicircle

CSS Code:

. semicircle-down {
	background: #e5c3b2;
	height:25px;
	width:50px;
	-moz-border-radius:0 0 50px 50px;
	-webkit-border-radius:0 0 50px 50px;
	border-radius:0 0 50px 50px;
}

Effect:

left semicircle

CSS Code:

. semicircle-left {
	background: #e5c3b2;
	height:50px;
	width:25px;
	-moz-border-radius:50px 0 0 50px;
	-webkit-border-radius:50px 0 0 50px;
	border-radius:50px 0 0 50px;
}

Effect:

8, Circle (circle)

CSS Code:

. Circle {
	background: #e5c3b2;
	height:50px;
	width:50px;
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;
}

Effect:

9, Oval (oval)

Horizontal Ellipse

CSS Code:

. ovalhor {
	background: #e5c3b2;
	height:40px;
	width:80px;
	-moz-border-radius:40px/20px;
	-webkit-border-radius:40px/20px;
	border-radius:40px/20px;
}

Effect:

Vertical Ellipse

CSS Code:

. ovalvert {
	background: #e5c3b2;
	height:80px;
	width:40px;
	-moz-border-radius:20px/40px;
	-webkit-border-radius:20px/40px;
	border-radius:20px/40px;
}

Effect:

10. Table Diagram (chartcolorful)

CSS Code:

. chartcolorful {
	height:0px;
	width:0px;
	border:50px solid red;
	Border-color:purple red yellow orange;
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
}

Effect:

11, One-fourth yuan (quartercircle)

One-fourth yuan (top)

CSS Code:

. quartercircletop {
	background: #e5c3b2;
	height:50px;
	width:50px;
	-moz-border-radius:50px 0 0 0;
	-webkit-border-radius:50px 0 0 0;
	border-radius:50px 0 0 0;
}

Effect:

One-fourth Round (right)

CSS Code:

. quartercircleright {
	background: #e5c3b2;
	height:50px;
	width:50px;
	-moz-border-radius:0 50px 0 0;
	-webkit-border-radius:0 50px 0 0;
	border-radius:0 50px 0 0;
}

Effect:

One-fourth yuan (bottom)

CSS Code:

. quartercirclebottom {
	background: #e5c3b2;
	height:50px;
	width:50px;
	-moz-border-radius:0  0 50px 0;
	-webkit-border-radius:0  0 50px 0;
	border-radius:0  0 50px 0;
}

Effect:

One-fourth Round (left)

CSS Code:

. quartercircleleft {
	background: #e5c3b2;
	height:50px;
	width:50px;
	-moz-border-radius:0  0 0 50px;
	-webkit-border-radius:0  0 0 50px;
	border-radius:0  0 0 50px;
}

Effect:

12. Chart (quartercircle)

Chart (top)

CSS Code:

. charttop {
	height:0px;
	width:0px;
	border:50px solid #e5c3b2;
	border-top-color:transparent;
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
}

Effect:

Chart (right)

CSS Code:

. chartright {
	height:0px;
	width:0px;
	border:50px solid #e5c3b2;
	border-right-color:transparent;
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
}

Effect:

Chart (bottom)

CSS Code:

. chartbottom {
height:0px;
width:0px;
border:50px solid #e5c3b2;
border-bottom-color:transparent;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}

Effect:

Chart (left)

CSS Code:

. chartleft {
	height:0px;
	width:0px;
	border:50px solid #e5c3b2;
	border-left-color:transparent;
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
}

Effect:

13. Heart shape (Heart)

left Heart Shape

CSS Code

. heartleft {
	width:0;
	height:0;
	border-color:red;
	border-style:dotted;
	border-width:0 40px 40px 0;
}

Effect:

Right Heart shape

CSS Code

. heartright {
	width:0;
	height:0;
	border-color:red;
	border-style:dotted;
	border-width:0  0 40px 40px;
}

Effect:

14. Ribbon (Ribbon)

CSS Code

. ribbon {
	width:0;
	height:100px;
	border-left:50px solid red;
	border-right:50px solid red;
	border-bottom:35px Solid Transparent
}

Effect:

The above is made with CSS 32 graphics effects, of course, you can also play your imagination and creativity, make some more beautiful graphics.

Extended reading: The shapes of CSS Drawing with CSS3 Tips & little More pure CSS graphic effects

So today, if you have more effective methods, please share them in the comments below.

If you want to reprint trouble Clear annotated Source: W3cplus