經(jīng)?？吹竭@樣的尖角，以前不懂，以為都是用圖片做出來的，后來驚奇的發(fā)現(xiàn)，原來很多都是用CSS做出來的，既美觀又節(jié)省資源，真是兩全其美啊！
那么，用CSS怎么實現(xiàn)這種效果呢？首先，來寫一個簡單的代碼：
|
1
2
3
|
<div class="arrow"></div>
|
|
1
2
3
4
5
6
7
8
|
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px #000;
}
|
這兒，我們可以得到一個黑色的正方形，其實這是邊框組成的，因為div的寬度和高度都是0,。那么，我們具體來看看，div寬度和高度都是0時，它的上下左右四邊框都是怎樣的，下面我們把邊框的各邊顏色分別設置為不同顏色：
|
1
2
3
|
<div class="arrow"></div>
|
|
1
2
3
4
5
6
7
8
9
|
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px;
border-color:#f00 #0f0 #00f #000;
}
|
我們發(fā)現(xiàn)，原來當div的寬度和高度都是0的時候，它的整個邊框是由四個三角形組成的，每一邊為一個三角形，那么我們就可以利用這個特點，來做可愛的小尖角了。我們只要把不需要的三邊的邊框（三角形）的顏色設置為與背景相同即可，這樣就只能看到你想要的那個三角形了，然后再利用定位調(diào)整一下位置就可以了。具體代碼如下所示：
|
1
2
3
4
5
|
<div class="send">
<div class="arrow"></div>
</div>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
body {
background:#4D4948;
}
.send {
position:relative;
width:150px;
height:35px;
background:#F8C301;
border-radius:5px; /* 圓角 */
margin:30px auto 0;
}
.send .arrow {
position:absolute;
top:5px;
right:-16px; /* 圓角的位置需要細心調(diào)試哦 */
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
|
大功告成，效果如下圖：
轉載：前端日志網(wǎng) ? 用CSS實現(xiàn)小尖角
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設。