首頁 >web前端 >html教學 >用css 製作三角

用css 製作三角

WBOY
WBOY原創
2016-08-10 08:49:421216瀏覽

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'}來實作

 

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn