用css 製作三角，css製作三角

用css 製作三角，css製作三角

html代碼:

<div class="div"></div>

css代碼：

.div{
border-top:40px solid #ff0077;
border-left:40px solid #004444;
border-bottom:40px solid #999999;
border-right:40px solid #333333;
height: 0px;
width: 0px;
}

效果:

 

 

現在一個一個分解出來

html代碼：

<div class="triggle-top"></div>
<div class="triggle-left"></div>
<div class="triggle-bottom"></div>
<div class="triggle-right"></div>

 

css代碼：

.triggle-top,.triggle-left,.triggle-bottom,.triggle-right{
border:100px solid transparent;
height: 0;
width: 0;
}
.triggle-top{
border-top-color:#ff0077;
}
.triggle-left{
border-left-color:#004444;
}
.triggle-bottom{
border-bottom-color:#999999;
}
.triggle-right{
border-right-color: #333333;
}

 

:

 

 

 

 

總之：製作小三角是利用border屬性來製作的

 

 

額外：

還有我想說的就是一般一個標籤比如：

這個刪除x可以用:after{content:'x'}來實現