每天一練,小白學習html5,css3之路。
css3很強大,今天的練習題目就是用css3創建出來各種角度的三角形,在以前可能我們需要用圖片替換,但是css3的出現就能夠輕鬆解決這個問題,雖然沒有圖片那麼美觀,不過有時候救急之需還是可以的。
方法/步驟
*{
margin: 0;
padding: 0;
text-decoration: none;
}
.triangle_up{
width: 0px;
height: 0px;
border: 100px solid transparent;
border-bottom: 100px solid red;
}
.triangle_left{
width: 0px;
height: 0px;
border: 100px solid transparent;
border-right: 100px solid red;
}
.triangle_right{
width: 0px;
height: 0px;
border: 100px solid transparent;
border-left: 100px solid red;
}
.triangle_bottom{
width: 0px;
height: 0px;
border: 100px solid transparent;
border-top: 100px solid red;
}
這裡是其實現的原理。
利用CSS的border以及它的屬性值transparent來實現三角形,其中最主要的是要明白由於div的高度跟寬度都為0,margin,padding也為0,所以元素框的大小就是他的border的疊加,由於相鄰boder會重疊,故存在內容寬高時其實任意一邊存在的border都是梯形的,當div內容寬高為0時,border就表現為三角形,將四個border的顏色設置為transparent表示邊框透明,而將右邊框顏色再設置為紅色就發現三角形出現了,其實這個三角形是右邊框。
CSS Code複製內容到剪貼板
#triangle-up {
width: 0px;
height: 0px;
border: 100px solid transparent;
border-right: 100px solid red;
}
圖解
正常的框模型,div的內容width以及height均為50px.黑線劃出來的區域就是它的右邊框,呈現為一個梯形
CSS Code複製內容到剪貼板
#triangle-up {
width: 50px;
height: 50px;
border: 100px solid red;
border-bottom: 100px solid red;
}
當div的內容width以及height均為0.黑線劃出來的區域就是它的右邊框,呈現為一個三角形
CSS Code複製內容到剪貼板
#triangle-up {
width: 0px;
height: 0px;
border: 100px solid red;
}
當div的內容width以及height均為0.上下左邊框都為透明的時候,只有右邊框顯示為紅色,三角形就看到了
CSS Code複製內容到剪貼板
#triangle-up {
width: 0px;
height: 0px;
border: 100px solid transparent;
border-right: 100px solid red;
}