Use css to draw triangles and css to draw triangles
How to draw triangles with css?
1). Use css to control the border attribute of border and draw four small triangles.
Html code
Css code
Effect:
It is easy to see from css that the border of the div is border-top, border-right, border-bottom, border-left(Upper right bottom left) these three borders are trapezoid.
So,If the upper and lower sides of the trapezoid are infinitely close to 0, is it closer and closer to the triangle?
As follows:
When width = 200px, height = 200px, (width is the width of the Middle White Rectangle, height is its height)
When width = 150px and height = 150px,
When width = 100px and height = 100px,
When width = 50px and height = 50px,
When width = 25px and height = 25px,
When width = 5px and height = 5px,
Finally, when width = 0px and height = 0px,
2). make unnecessary triangles transparent
Border-color has a value: transparent (transparent), so you only need to set the border-color of other triangles"Transparent"You can.
Html code
Css code
Effect:
Note: Internet Explorer 6 (and earlier versions) does not support the attribute value "transparent ".
Effect in IE6:
Change css:
Border-color: transparent blue;
Border-width: 50px;
Border-style: dashed solid;
Effect in IE6:
ListenHinongBrother's words, added"Overflow: hidden ;"In IE6, the display is normal.
Effect:
DEMO code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">