ホームページ > 記事 > ウェブフロントエンド > CSS は境界線を使用して三角形を描画します_html/css_WEB-ITnose
CSS は境界線を使用して三角形を描画します_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:541229ブラウズ
ボーダーを使用して三角形を描画するというアイデアは、各辺が 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 までご連絡ください。