用css 製作三角

html代碼:

css代碼：

.div{
上邊框：40 像素實心#ff0077；
左邊框：40 像素實心#004444;
下邊框：40 像素實心#999999；
右邊框：4030p30p30p；寬度：0px；
}

效果:

 

 

現在一個分拆出來

html代碼：

< ;/div>

 

css代碼：

.triggle-top,.triggle-left,.triggle-bottom,.triggle-right{

邊框:100px 實心透明;

高度: 0;
寬度: 0;
}
高度: 0;
寬度: 0;
}
.triggle-top{
color:#ff0077;
}
.triggle-left{
border-left-color:#004444;
}
.triggle-bottom{
border-bottom-color:#9999999;右邊框顏色：#333333;
}

 

效果圖

:

 

 

 

 

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

 

 

另外：

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

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