純css模擬三角圖形 以及 三角箭頭
前幾天寫學校的一個首頁,用到了這個三角箭頭。
首先我們來看一下,實現的原理。
我們使用的是border 來模擬出三角形。
p.one
{
width: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid blue;
border-right: 50px solid blue ;
border-bottom: 50px solid red;
}
可以看出當沒有內容時,我們可以通過改變邊框的大小和顏色來模擬出我們想要的形狀。
我們可以分別的模擬出各種不同的形狀。
這樣我們就可以得到任何我們想要的的三角形。
然後我們還可以通過調整內容的長寬來模擬出梯形或其他的圖。
然後我們就可以來看一下,怎麼去實現三角箭頭。
三角箭頭需要使用的是:after 。當然你也可以再使用一個p 標籤來模擬出相同的效果。
但是還是推薦使用 :after
.arrow_top{
position: relative;
width: 0px;
height: 0px;
border:10px solid transparent;
border-bottom: 10px solid #222;
left:70px;
top: 20px;
}
.arrow_top:after{
content:"";
display:block;
width:0px;
height:0px;
border:10px solid transparent;
border-bottom: 10px solid #888;
position: relative;
top:-0px;
left: -0px;
}
這時你會得到兩個相同的三角形。
這時我們通過調整after 的位置和顏色來模擬出箭頭的樣子。
調整top 和 left 以及下方三角的顏色我們就可以得到三角的箭頭。