建站
咨詢
售后
建站咨詢
新聞中心
CSS 提供了三種出色的方法可以實(shí)現(xiàn)基本的形狀。本文就來看看如何使用這些方法來實(shí)現(xiàn)一個(gè)三角形。三種方法如下：
城子河網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站從2013年開始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。
- border。
- linear-gradient。
- clip-path。
1、border
使用 CSS 繪制三角形的第一種方法就是使用 「border」 屬性。
給定一個(gè)寬度和高度都為 0 的元素，其 border 的任何值都會(huì)直接相交，我們可以利用這個(gè)交點(diǎn)來創(chuàng)建三角形。也就是說，border屬性是三角形組成的，下面給每一邊都提供不同的邊框顏色：
.triangle {
width: 0;
height: 0;
border: 100px solid;
border-color: orangered skyblue gold yellowgreen;
}將元素的長(zhǎng)寬都設(shè)置為0，效果是這樣的：
可以看到，我們已經(jīng)基本上實(shí)現(xiàn)了4個(gè)三角形形狀。所以可以根據(jù)border這個(gè)特性來繪制三角形。
如果想要一個(gè)指向下面的三角形，可以讓 border 的上邊可見，其他邊都設(shè)置為透明：
.triangle {
width: 0;
height: 0;
border-top: 50px solid skyblue;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}如果想要一個(gè)指向右面的三角形，可以讓 border 的左邊可見，其他邊都設(shè)置為透明：
.triangle {
width: 0;
height: 0;
border-left: 50px solid skyblue;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}上面的代碼也可以這樣寫：
.triangle {
border-style: solid;
border-color: transparent;
border-width: 50px 0 50px 50px;
border-left-color: skyblue;
}
我們還可以通過調(diào)整不同方向邊框的值來實(shí)現(xiàn)不同方向和大小的三角形：
.triangle {
width: 0;
height: 0;
border-top: 100px solid skyblue;
border-right: 100px solid transparent;
}
當(dāng)然，實(shí)現(xiàn)一個(gè)等邊三角形也是可以的：
.triangle {
width: 0;
height: 0;
border-left: 69px solid transparent;
border-right: 69px solid transparent;
border-bottom: 120px solid skyblue;
}
2、linear-gradient
linear-gradient 需要結(jié)合 background-image 來實(shí)現(xiàn)三角形，下面就來逐步使用漸變實(shí)現(xiàn)一個(gè)三角形。
首先，我們先來畫一個(gè)長(zhǎng)方形：
.triangle {
width: 80px;
height: 100px;
background-repeat: no-repeat;
outline: 1px solid skyblue;
}效果如下：
接下來，添加一個(gè)漸變，這會(huì)使元素的一半呈現(xiàn)紅色：
background-image: linear-gradient(45deg, orangered 50%, rgba(255, 255, 255, 0) 50%);
效果如下：
我們的目標(biāo)是創(chuàng)建一個(gè)與使用 border 方法時(shí)外觀相同的三角形。因此，需要調(diào)整 background-size 和 background-position 值：
background-size: 100% 50%;
效果如下：
由于漸變?cè)O(shè)置了 45 度角，形狀看起來有些奇怪。需要調(diào)整角度，使三角形的頂邊是從左上角開始，直到右側(cè)的中間?？梢允褂脼g覽器開發(fā)者工具進(jìn)行調(diào)試，直到預(yù)期的效果。將 linear-gradient 值更新為：
background-image: linear-gradient(32deg, orangered 50%, rgba(255, 255, 255, 0) 50%);
效果如下：
這其實(shí)已經(jīng)是一個(gè)三角形了，但還不是我們想要的效果。對(duì)于線性漸變，我們需要添加多個(gè)背景來實(shí)現(xiàn)三角形。下面來添加一個(gè)它的鏡像效果：
background-image: linear-gradient(32deg, orangered 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, orangered 50%, rgba(255, 255, 255, 0) 50%);
效果如下：
看似距離三角形還很遠(yuǎn)，但是只需最后一步，只需調(diào)整兩個(gè)三角形的位置即可，這里使用 background-position 屬性來調(diào)整：
background-position: top left, bottom left;
效果如下：
這樣就實(shí)現(xiàn)了三角形的效果(去掉outline即可)，最終的代碼如下：
.triangle {
width: 160px;
height: 200px;
outline: 2px solid skyblue;
background-repeat: no-repeat;
background-image: linear-gradient(32deg, orangered 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, orangered 50%, rgba(255, 255, 255, 0) 50%);
background-size: 100% 50%;
background-position: top left, bottom left;
}CSS 線性漸變可用于創(chuàng)建很多種形狀。不過它是有缺點(diǎn)的，就是需要調(diào)試出合適的漸變角度。
3、clip-path
最后一種方法——clip-path，它是精簡(jiǎn)的并且有擴(kuò)展性的。不過目前其在瀏覽器兼容性不是很好，使用時(shí)要考慮瀏覽器是否支持。
下面先畫一個(gè)帶背景顏色的長(zhǎng)方形：
.triangle {
width: 80px;
height: 100px;
background-color: skyblue;
}效果如下：
clip-path 就是使用它來繪制多邊形(或圓形、橢圓形等)并將其定位在元素內(nèi)。實(shí)際上，瀏覽器不會(huì)繪制 clip-path 之外的任何區(qū)域，因此我們看到的是 clip-path 的邊界。
下面來繪制一個(gè)指向右側(cè)的三角形：
clip-path: polygon(0 0, 0% 100%, 100% 50%);
這個(gè)值是怎么來的呢?使用 clip-path 可以為沿路徑放置的每個(gè)點(diǎn)定義坐標(biāo)。在這種情況下，就定義了三個(gè)點(diǎn)：top-left (0 0)、bottom-left (0% 100%)、right-center (100% 50%)。效果如下：
完整代碼如下：
.triangle{
margin: 100px;
width: 160px;
height: 200px;
background-color: skyblue;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}可以使用在線工具來嘗試這個(gè)屬性，繪制不同的圖形：https://bennettfeely.com/clippy/。
本文到這里就結(jié)束了，你還知道哪些使用純 CSS 實(shí)現(xiàn)三角形的方法?
本文標(biāo)題：純CSS實(shí)現(xiàn)三角形的三種方式
轉(zhuǎn)載注明：http://www.5511xx.com/article/ccedidg.html
