Home > Developer > JavaScript
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">
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
