CSS in-depth understanding of border: using border to draw triangles and other graphics

The triangle is actually the product of border our normal use of border are four sides of a color, when we put four sides of different colors then you will find that the triangle came!

<! DOCTYPE html>"en">"UTF-8"> &LT;TITLE&GT;CSS3 Triangular Representations </title> <style>. content{ width:0px;            height:0px;            margin:50px Auto 0px; Border -width:150px;            Border-color: #666 #CC0066 #CC9966 #FFCC33; border- style:solid; }    </style>class="content"></div></body>

The original border each side, forming a triangle. It has always been strange, why each width and height are 0px? I think the reason is self-evident. Of course we should try and see ~

can be added padding:50px; the white area in the middle is 100px.

Plus border-radius:50%;

<! DOCTYPE html>"en">"UTF-8"> &LT;TITLE&GT;CSS3 Triangular Representations </title> <style>. content{Width:0; Height:0;            margin:50px Auto 0px; /*I didn't modify width and height, but I used padding.*/padding:50px; Border-width:150px; Border-color: #666#CC0066 #CC9966 #FFCC33; Border-Style:solid; /*You can also set a Border-radius to play*/-webkit-border-radius: -%; -moz-border-radius: -%; Border-radius: -%; }    </style>class="content"></div></body>

We see the triangle, but we can't get the triangle? Quite simply, we know that the Border-color values correspond to the sides of top, right, bottom, and left; now we don't want that, just make that side transparent.

Of course we want the triangle is not usually the case, now, we just let Border-color and Border-width collocation, you can transform all kinds of triangles.

<! DOCTYPE html>"en">"UTF-8"> &LT;TITLE&GT;CSS3 Triangular Representations </title> <style>. outer{Display:inline-Block;            margin:50px; Text-Align:center; Font-size:24px; Line-height:40px; }. content{Width:0; Height:0; Border-Style:solid; }. Content-1{            /*do not have the upper triangle while the left and right do not have color is the lovely triangle*/Border-width:0px 100px 100px 100px; Border-color:transparent transparent #CC9966 transparent; }. Content-2{            /*the triangle on the left is on the right. No, there's nothing wrong with the upper and lower triangles .*/Border-width:100px 0px 100px 100px; Border-color:transparent Transparent transparent #CC9966; }. Content-3{Border-width:100px 100px 100px 100px; Border-color:transparent #CC9966 #CC9966 Transparent; }    </style>class="outer"> <divclass="content Content-1"></div> <div> Lower Triangle </div> <divclass="content Content-2"></div> <div> Left Triangle </div> <divclass="content content-3"></div> <div> right Straight triangle </div></div></body>

Note: If you use Border-weight to make the color of the corresponding edge transparent, then the size of the border will be the same.

As for the triangle, irregular triangle and so on, as long as know its principle, are very can draw out

<! DOCTYPE html>"en">"UTF-8"> &LT;TITLE&GT;CSS3 Triangular Representations </title> <style>div{width:0px;            height:0px; Border-Style:solid;        margin:30px Auto 0px; }. Content-1{             /*trapezoidal with the help of padding*/padding:10px 20px; Border-width:0px 50px 50px 50px; Border-color:transparent transparent #CC9966 transparent; }. Content-2{            /*padding do trapezoid*/padding:20px 10px; Border-width:50px 50px 50px 0px; Border-color:transparent #CC9966 Transparent transparent; /*Horn Effect*/-webkit-box-shadow:inset 15px0#666; -moz-box-shadow:inset 15px0#666; Box-shadow:inset 15px0#666; }. Content-3{width:100px;            height:100px; Background-color: #CC9966;            Border:none; /*parallel four-sided rows can be fully rotated*/-webkit-transform:skew (-30deg); -moz-transform:skew (-30deg); -ms-transform:skew (-30deg); -o-transform:skew (-30deg); Transform:skew (-30deg); }    </style>class="content-1"></div> <divclass="content-2"></div> <divclass="content-3"></div></body></body>

CSS in-depth understanding of border: using border to draw triangles and other graphics