div と css を使用して三角形を作成するeffect_html/css

div と css を使用して三角形を作成するeffect_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:29:07

オリジナル

1048 人が閲覧しました

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/