Common graphics written by CSS

has not been for the classification of CSS to write something, today found some information to write this CSS common graphics, development will be used in the Oh!

From the simplest square, say:

width:100px;height:100px;background:red;

Rectangular:

width:200px;height:100px;background:red;

Round:

width:100px;height:100px;background:red;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;

Elliptic:

width:200px;height:100px;background:red;-moz-border-radius:100px/50px;-webkit-border-radius:100px/50px; border-radius:100px/50px;

Upper triangle:

width:0;height:0;border-left:50px Solid transparent;border-right:50px Solid transparent;border-bottom:100px solid RE D

Lower triangle:

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

Left triangle:

width:0;height:0;border-top:50px Solid transparent;border-right:100px Solid red;border-bottom:50px solid Transparent ;

Right triangle:

width:0;height:0;border-top:50px Solid transparent;border-left:100px solid red;border-bottom:50px solid transparent;

Upper Left Triangle:

width:0;height:0;border-top:100px solid red;border-right:100px solid transparent;

Upper right triangle:

width:0;height:0;border-top:100px solid red;border-left:100px solid transparent;

Lower right triangle:

width:0;height:0;border-bottom:100px solid red;border-left:100px solid transparent;

Left small triangle:

width:0;height:0;border-bottom:100px solid red;border-right:100px solid transparent;

Trapezoidal:

border-bottom:100px Solid red;border-left:50px Solid transparent;border-right:50px solid Transparent;height:0;width: 100px;

There is also a dialog box:

#talkbubble{width:120px;Height:80px;background:Red;position:relative;-moz-border-radius:10px;-webkit-border-radius:10px;Border-radius:10px;}#talkbubble: Before{content:"";position:Absolute; Right:100%;Top:26px;width:0;Height:0;Border-top:13px Solid Transparent;Border-right:26px Solid Red;Border-bottom:13px Solid Transparent;}

Well, good, common graphics these are almost, then right angle trapezoid, parallelogram how to do? There is also a guarantee that the text inside is positive.

Look at the code:

html<div class= "btn" >home</div> css:. BTN{position:relative;width:150px;Height:40px;text-align:Center;Line-height:40px; }. Btn:after{position:Absolute;content:"';width:100%;Height:100%;Top:0; Left:0;Background-color:#fb3;Z-index:-1;/*Make sure the background doesn't cover the text*/Transform:skew ( -45deg);-moz-transform:skew ( -45deg);-ms-transform:skew ( -45deg);-webkit-transform:skew ( -45deg); }

So, what about this right angle trapezoid?

This will require the perspective attribute in this CSS3, put it on the parent element, and then write the transform style on the child element:

HTML <div class= "parent" > <div class= "Child" > </div> </div> <p></p> <div class= "Parent2" > <div class= "Child" > </div> < ;/div>css:.parent{width:100px;Height:100px;Background-color:#ddd;Background-color:#fb3;Transform:Perspective (20px) Rotatex (5deg);Transform-origin: Right; }. Parent2{width:100px;Height:100px;Background-color:#ddd;Background-color:#fb3;Transform:Perspective (20px) Rotatex (5deg);Transform-origin: Left; }

html<div class= "Parent3" > <div class= "Child" > </div> </div>css :. Parent3{width:100px;Height:100px;Background-color:#ddd;Background-color:#fb3;Transform:Perspective (20px) Rotatex ( -5deg)  ;Transform-origin: Left; }

Below the inverted trapezoid, it is only necessary on the basis of the trapezoid, will be rotate ( -5deg);

The above mentioned: the background graphics have rotation changes, but the inside of the text can not be distorted, the above with pseudo-elements of the method may be implemented, you can do so, the parent can rotate the number of degrees, and then his child in the rotation of this negative degree is OK;

parent element:. Messages_margin20>div>div>div:nth-of-type (2) >a{Border-radius:10px;Transform:skew ( -30deg);Display:Block;background:Linear-gradient (to right, #a20000, #8e0000, #a20000);-moz-transform:skew ( -30deg);-ms-transform:skew ( -30deg);-webkit-transform:skew ( -30deg);}child elements:. Messages_margin20>div>div>div:nth-of-type (2) >a. Messages_col{Transform:skew (30deg);-moz-transform:skew (30deg);-ms-transform:skew (30deg);-webkit-transform:skew (30deg); }

(This code originates from the contents of today's work project)

Daily sentence: Love a person too much,the heart'll be drunk; Hate a person too long,the heart would be broken.

Love a person too deep, the heart will be drunk, hate a person too long, heart will break.

Common graphics written by CSS