溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在平時的開發中我們經常要使用到小三角
，我們除了使用切出來的圖案，還有其他方式來實現這個小三角嗎？答案是肯定的，只要通過border這個css屬性就可以簡單實現啦。
下面讓我們一步步來看下是如何實現的。
首先我們來看如下代碼
<style type="text/css">
.triangle_test{
width:50px;
height: 50px;
border-width: 15px;
border-color: red green black blue;
border-style: solid;
}
.triangle_test1{
width:100px;
height:100px;
border-width: 15px;
border-color: red green black blue;
border-style: solid;
}
</style>
<body>
<div class="triangle_test"></div>
<p>
<span class="triangle_test1"></span>
<s class="triangle_test1"></s>
</p>
</body>顯示結果：
但是如果我們把width 和heigth設置成為0那又變成啥了？
看圖可知，對于行內元素width和heigth并不起效果的，所以在triangle_test1中我們需要使用到
font-size:0這個css屬性來設置行內元素的高度.
.triangle_test1{
width:0;
height:0;
border-width: 15px;
border-color: red green black blue;
border-style: solid;
font-size:0;
}
到這一步我們就應該知道三角形該怎么實現了吧。
有人說那我只設置border-top的屬性，只讓踏一個顯示不就好了么？真的是這樣嗎？
然而事實是這樣并不能實現。這里通過一個小例子來解釋
1.1 設置相鄰邊框可見
.triangle_1{
width:100px;
height: 100px;
border-width:20px;/* 20px 0 0;*/
border-style: solid;
border-color: red green blue black;
}
顯示出來是這樣子的，紅色邊框顯示為梯形
.triangle_1{
width:100px;
height: 100px;
border-width:20px 20px 0 0;/*這里有修改*/
border-style: solid;
border-color: red green blue black;
}
看到了嗎，紅色并不是顯示為梯形，黑色不顯示的話，他會把部分紅色區域覆蓋，規律一看就知。
所以使另外三邊變為透明即可實現小三角。
2.設置邊框顏色透明度
.triangle2{/*兼容各個瀏覽器*/
width: 0;
height: 0;
border-width: 10px;
border-style:solid; /*dashed dashed dashed/*
border-color: red transparent transparent transparent;
font-size:0;
}但是這個就會導致不能兼容ie6以下的瀏覽器，因為不識別transparent屬性。
所以這里用到了一個ie6以下瀏覽器的特點就是border-style:dashed這個屬性
可以參考文章 http://it.chinawin.net/application/article-180df.html
所以最終的結果為
.triangle2{ /*兼容各個瀏覽器*/
width: 0;
height: 0;
border-width: 10px;
border-style:solid dashed dashed dashed;
border-color: red transparent transparent transparent;
font-size:0;
}--------------------------------------------------------------------------------
以上只有上下左右三角的畫法，接下來我們簡單說下左上角三角的畫法
這里就可以用到上述文中1.1中的樣式
.triangle_1{
width:0;//將width和heigth設置為0
height: 0;
border-width:20px 20px 0 0;
border-style: solid;
border-color: red green blue black;
}
這樣我們只要設置border-style:solid dashed dashed dashed;
border-color:red transparent transparent transparent;即可得到紅色的左上箭頭
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
