Home >Web Front-end >HTML Tutorial >CSS uses border to draw triangles_html/css_WEB-ITnose
CSS uses border to draw triangles_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:541263browse
The idea of using border to draw a triangle is to set the border value to a large value so that each side will appear as a quarter-block triangle. In this way, the triangle can be drawn directly without the help of pictures.
An example:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#triangle{ height:0; width:0; border-top:solid 100px yellow; border-left:solid 100px purple; border-right:solid 100px purple; border-bottom:solid 100px yellow;}</style></head><body><div id="triangle"></div></body></html> Effect:
If the width and height of the block are set, the edge effect will still appear. Each side will be an isosceles trapezoid, similar to a picture frame:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#triangle{ height:100px; width:100px; border-top:solid 100px yellow; border-left:solid 100px purple; border-right:solid 100px purple; border-bottom:solid 100px yellow;}</style></head><body><div id="triangle"></div></body></html> Effect:
Using this principle, triangles of different shapes can be drawn, for example Right isosceles right triangle commonly used on menus:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#triangle{ height:0; width:0; border-top:solid 100px rgba(0,0,0,0); border-left:solid 100px purple; border-bottom:solid 100px rgba(0,0,0,0);}</style></head><body><div id="triangle"></div></body></html>
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#triangle{ height:0; width:0; border-right:solid 100px rgba(0,0,0,0); border-bottom:solid 100px yellow; border-left:solid 100px rgba(0,0,0,0);}</style></head><body><div id="triangle"></div></body></html> Picture:
One more:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#triangle{ height:0; width:0; border-right:solid 50px rgba(0,0,0,0); border-bottom:solid 100px yellow; border-left:solid 50px rgba(0,0,0,0);}</style></head><body><div id="triangle"></div></body></html> Tutu:
That’s it, come on! Make a little progress every day.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn