ホームページ > 記事 > ウェブフロントエンド > div と css を使用して三角形を作成するeffect_html/css_WEB-ITnose
div と css を使用して三角形を作成するeffect_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:29:071049ブラウズ
div と css を使用して三角形の効果を作成する:
この章では、div と css を使用して三角形の効果を実現する方法を紹介しますが、原理は非常に簡単です。
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#box{ width:0px; height:0px; border:40px solid white; border-top-color:#930; border-bottom-color:#0C3; border-left-color:#FC0; border-right-color:#009; line-height:0px;}</style></head><body><div id="box"></div></body></html>
実際、この三角形は div の境界線を使用して「押し出されて」います。境界線は異なる色を使用しているため、 を維持するだけであれば簡単に区別できます。一方向の三角形の場合は、自分で境界線の色を設定するか、境界線を削除することができます。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=12680
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。