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

因?yàn)樽罱吹絼e人寫的不錯(cuò)的樣式，所以就想自己實(shí)現(xiàn)，但是呢用到了一個(gè)三角形，所以稍微研究一下。

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

效果是這樣的：

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

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

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

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

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é)果就是在屏幕上得到一個(gè)正方形的小黑塊。

接下來就是實(shí)現(xiàn)三角了，需要使用transparent這個(gè)參數(shù)，這個(gè)參數(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的值，加長?。?/p>

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

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

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

<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ù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

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

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

廣告

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