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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

ボーダーを使用して三角形を描画するというアイデアは、各辺が 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もっと:

れーれー

チュチュ:

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。