ホームページ > 記事 > ウェブフロントエンド > HTML枠線CSS出力三角_html/css_WEB-ITnose
HTML枠線CSS出力三角_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:54:411168ブラウズ
次の HTML コードがあります:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .triangle_up{ height:0px; width:0px; border-bottom:50px solid red; border-left:50px solid transparent ; border-right:50px solid transparent ;} </style></head><body> <div class="triangle_up"></div> </body></html> 一見わかりにくいですが、効果は次のとおりです:
CSS を変更します:
.triangle_up{ height:0px; width:0px; border-bottom:50px solid red; border-left:50px solid ; border-right:50px solid ;}
まだ混乱しているので、幅と高さをもう一度変更します:
幅と高さを再度変更します:
突然思いつきました。
ブロックの幅と高さが両方とも0で、透明度が巧妙に設定されているため、三角形のように見えます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。