使用css實(shí)現(xiàn)三角符號(hào)效果
發(fā)布時(shí)間：2018-10-09 14:17:32 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了使用css實(shí)現(xiàn)三角符號(hào)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
關(guān)于使用css制作三角符號(hào)，網(wǎng)上有很多的例子了，在這里只是為了詳細(xì)的向各位解釋一下三角符號(hào)的原理
下圖，是一個(gè)長(zhǎng)寬為100px，邊框?qū)挾葹?00px的一個(gè)元素，由此可見，在css中上下左右的邊框相交處并不是一個(gè)直線，所以，可以根據(jù)此屬性進(jìn)行編寫三角符號(hào)
那么如何使用css的該屬性來實(shí)現(xiàn)三角符號(hào)的效果呢，代碼如下：
html代碼
<body>
<div></div>
</body>
css代碼
div:after{
position: absolute;
width: 0px;
height: 0px;
content: " ";
border-right: 100px solid transparent;
border-top: 100px solid #ff0;
border-left: 100px solid transparent;
border-bottom: 100px solid transparent;
}
效果圖：
這種方法是使用的偽類來實(shí)現(xiàn)的三角符號(hào)，然后使用絕對(duì)定位，不會(huì)占用空間
transparent是透明色，大家如果想要的三角符號(hào)的方向不一樣，只需將對(duì)應(yīng)方向的邊框顏色加上，其他的改為透明色即可
推薦：
感興趣的朋友可以關(guān)注小編的微信公眾號(hào)【碼農(nóng)那點(diǎn)事兒】，更多網(wǎng)頁制作特效源碼及學(xué)習(xí)干貨哦！??！
總結(jié)
以上所述是小編給大家介紹的使用css實(shí)現(xiàn)三角符號(hào)效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
- 這篇文章主要介紹了CSS3 畫基本圖形，圓形、橢圓形、三角形等的相關(guān)資料,需要的朋友可以參考下2016-09-20
- 下面小編就為大家?guī)硪黄肅SS制作三角形和按鈕的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-15
CSS仿網(wǎng)易首頁的頭部菜單欄按鈕和三角形制作方法
這篇文章主要介紹了CSS仿網(wǎng)易首頁的頭部菜單欄按鈕和三角形制作方法的相關(guān)資料,需要的朋友可以參考下2016-08-15CSS實(shí)現(xiàn)三角效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狢SS實(shí)現(xiàn)三角效果的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-04