国境の三角形を使用しています

多くの場合、実際には、我々が使用し、純粋なCSSの境界線の三角形を作ることができ、途中の絵に加えて、サイト上の三角形の一部を使用。私たちは、国境が揺れ方を知っている交差点の四方をするとき、彼らは変化しなかった場合は、個別に設定することができますか？

.t0{
  margin:30px;
  height:200px; width:200px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100px blue; }

 

 

 

詠唱時に場所で見ることができる要素の幅、および高さプロパティが0に設定さ45degデモによって二分する境界線を交差

.t1{
  margin:30px;
  height:0px; width:0px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100px blue; }

 

 

 

私たちは、三角形を見ることができるように、2つの境界、トップを削除しようとすると、左の値が予約されています

.t2{
  margin:30px;
  height:0px; width:0px; border-top:solid 100px red; border-left:solid 100px green; }

 

 

 

これは、三角形を行うには時間がある限り、我々は隣接する二つの側面を維持するよう、他の一方が透明に設定することができます、簡単なようです

.t3{
  margin:30px;
  height:0px; width:0px; border-top:solid 100px red; border-right:solid 100px rgba(0,0,0,0); }

 

 

 

だから我々は、直角三角形を持って、そして少しの工夫

.t4{
  margin:30px;
  height:0px; width:0px; border-top:solid 90px red; border-left:solid 200px rgba(0,0,0,0); }

 

 

 

二等辺直角三角形そうすることも簡単で、隣接する3つの側面を保持するために、リスト上の2つの透明に設定されています

.t5{
  margin:30px;
  height:0px; width:0px; border-top:solid 200px red; border-left:solid 200px rgba(0,0,0,0); border-right:solid 200px rgba(0,0,0,0); }

 

 

 

そして、少しの調整、あなたはまた、様々な形状を作ることができます

.t6{
  margin:30px;
  height:0px; width:0px; border-left:solid 100px green; border-top:solid 100px rgba(0,0,0,0); border-bottom:solid 100px rgba(0,0,0,0); }

 

 

 

.t7{
  margin:30px;
  height:0px; width:0px; border-left:solid 200px green; border-top:solid 80px rgba(0,0,0,0); border-bottom:solid 80px rgba(0,0,0,0); }

 

 

 

.t8{
  margin:30px;
  height:0px; width:0px; border-left:solid 100px green; border-top:solid 200px rgba(0,0,0,0); border-bottom:solid 100px rgba(0,0,0,0); }

 

 

 出典：銭行