關(guān)于html-三角的制作-創(chuàng)新互聯(lián)

因為最近看到別人寫的不錯的樣式，所以就想自己實現(xiàn)，但是呢用到了一個三角形，所以稍微研究一下。

沙坡頭網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,沙坡頭網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為沙坡頭成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的沙坡頭做網(wǎng)站的公司定做！

效果是這樣的：

注意是下邊那個淺色三角，感覺書簽的效果有木有?？粗苡袑哟胃?。

接下來就是實現(xiàn)了，利用border這個屬性。

這里的話主要是 border-top、border-left、border-right、border-bottom 可以在css手冊中查到（http://css.doyoe.com/）

先拉個空白寫吧，我把幾個屬性都寫上。

code:

.triangle{
width:0;
height:0;
border-top:10px solid #000;
border-left:10px solid #000;
border-right:10px solid #000;
border-bottom:10px solid #000;
}

然后結(jié)果就是在屏幕上得到一個正方形的小黑塊。

接下來就是實現(xiàn)三角了，需要使用transparent這個參數(shù)，這個參數(shù)是使顏色透明。

code:

.triangle{
width:0;
height:0;

border-top:10px solid #000;
border-left:10px solid #000;
border-right:10px solid #000;
border-bottom:10px solid transparent;

}

效果：（有沒有書簽的感覺？這里可以更改top的值，加長！）

那現(xiàn)在我們需要的就是給left也加上一個transparent就可以了，但是注意一點，這個時候top和right的修改影響這個三角的大小，比如我們?nèi)サ粢豁?，可以看效果?/p>

效果如上。這個時候與別人效果基本相似了，現(xiàn)在只需要把顏色切換就可以了。（#7195B7）

然后我們回到開始的那個demo,這樣效果呢，肯定要用到position定位了，然后把它定在下邊！考慮吧如果再寫個div標簽的話

<div class="one">
    日志    
    <div class="triangle">
    </div>

</div>

效果的話有興趣的各位可以試試。

還有一種是利用::after；然后里邊寫定位

one::after{
    content: "";
    width:0;
    height:0;
    
    border-top:10px solid #000;
    border-left:10px solid #000;
    border-right:10px solid #000;
    border-bottom:10px solid transparent;

}

<div class="one">日志</div>

等我寫好了截圖放回來！

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統(tǒng)配攻擊溯源，準確進行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

分享標題：關(guān)于html-三角的制作-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://muchs.cn/article24/dscgce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、網(wǎng)站排名、企業(yè)建站、微信小程序、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)