CSS uses border to draw triangles_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS uses border to draw triangles_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:51:54

Original

1235 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

<!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>

Copy after login

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>

Copy after login

Tutu:

That’s it, come on! Make a little progress every day.