CSS3:難以想象的border屬性

在CSS中,其border屬性有不少的規則。對於一些事物,例如三角形或者其它的圖像,咱們仍然使用圖片代替。可是如今就不須要了,咱們能夠用CSS造成一些基本圖形,我分享了一些關於這方面的技巧。spa

一、正三角形:

.triangle_up
{
  height:0px; width:0px;
  border-bottom:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

二、倒三角形:

.triangle_down
{
  height:0px; width:0px;
  border-top:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

三、左三角形

.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  float:left;
}  

四、右三角形

.triangle_right
{
  height:0px; width:0px; float:left;
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}

五、十字街效果

.crossSquare
{
  height:0px; width:0px;
  border-right:50px solid blue;
  border-top:50px solid gray;
  border-bottom:50px solid red;
  border-left:50px solid yellow;
}

 

相關文章
相關標籤/搜索