CSS は境界線を使用して三角形を描画します_html/css

CSS は境界線を使用して三角形を描画します_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:51:54

オリジナル

1228 人が閲覧しました

ボーダーを使用して三角形を描画するというアイデアは、各辺が 4 分の 1 ブロックの三角形として表示されるように、ボーダーの値を大きな値に設定することです。このようにして、絵を使わずに直接三角形を描くことができます。

クリ:

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

ログイン後にコピー

効果:

ブロックの幅と高さを設定すると、各エッジはフォトフレームに似た二等辺台形になります:

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

ログイン後にコピー

効果:

この原理を使用すると、メニューでよく使用される右向き直角二等辺三角形など、さまざまな形の三角形を描くことができます:

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

ログイン後にコピー

写真:

1もっと:

れーれー

チュチュ:

それで、さあ！小さいながらも日々進歩していきましょう。