css3能不能實現三角形

css3能實現三角形，有多種實作方法：1、利用高寬為零的容器和透明的border繪製三角形；2、利用線性漸變linear-gradient繪製三角形；3、利用conic-gradient繪製三角形；4、利用clip-path繪製三角形等。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css3中可以使用多種方法實作三角形。 下面就來看看：

1、使用border 繪製三角形

使用border 實作三角形應該是大部分人都掌握的，也是各種面經中常出現的，利用了高寬為零的容器及透明的border 實現。

<div class=&#39;top&#39;></div>
<div class=&#39;bottom&#39;></div>
<div class=&#39;left&#39;></div>
<div class=&#39;right&#39;></div>

html, body {
  width: 100%;
  height: 100%;
  display: flex;
}

div {
  width: 0px;
  height: 0px;
  margin: auto;
}
.top {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

.left {
  border: 50px solid transparent;
  border-right: 50px solid deeppink;
}

.bottom {
  border: 50px solid transparent;
  border-top: 50px solid deeppink;
}

.right {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

2、使用linear-gradient 繪製三角形

<div></div>

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}

3 、使用conic-gradient 繪製三角形

或漸變，上述我們使用了線性漸變實現三角形，有意思的是，在漸變家族中，角向漸變 conic-gradient 也可以用於實現三角形。

方法在於，角向漸變的圓心點是可以設定的，類似徑向漸層的圓心點也可以被設定。

我們將角向漸變的圓心點設定在 50% 0，也就是 center top，容器最上方的中間，再進行角向漸變，漸變到一定的角度範圍內，都是三角形圖形。

假設我們有一個200px x 100px 高寬的容器，設定其角向漸變圓心點為50% 0：

並且，設定它從90° 開始畫角向漸變圖，示意圖如下：

可以看到，在初始的時候，角向漸層圖形沒有到第二邊的之前，都是三角形，我們選取適合的角度，非常容易的可以得到一個三角形：

<div class="normal"></div>
<div class="acute"></div>

.normal {
    background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
}

.acute {
    background: conic-gradient(from 90deg at 50% 0, transparent 0, transparent 45deg, deeppink 45.1deg, deeppink 135deg, transparent 1deg);
}

4、transform: rotate 配合overflow: hidden 繪製三角形

這種方法還是比較常規的，使用transform: rotate 配合overflow: hidden。一看就懂，一學就會，簡單的動畫示意圖如下：

#設定圖形的旋轉中心在左下角left bottom，進行旋轉，配合overflow: hidden。

完整的程式碼：

<div class="demo"></div>
<div class="demo-opacity"></div>
<div class="triangle"></div>

html, body {
    width: 100%;
    height: 100%;
    display: flex;
}

div {
    width: 141px;
    height: 100px;
    margin: auto;
}

.demo-opacity {
    overflow: hidden;
}

.demo,
.demo-opacity {
    position: relative;
    border: 1px solid #000;
    background: unset;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        animation: conicmove 3s infinite linear;
        background: deeppink;
        transform-origin: left bottom;
        z-index: -1;
    }
}

.triangle {
    position: relative;
    background: unset;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: deeppink;
        transform-origin: left bottom;
        transform: rotate(45deg);
        z-index: -1;
    }
}

@keyframes conicmove {
    100% {
        transform: rotate(45deg);
    }
}

5、使用clip-path 繪製三角形

clip-path 一個很有趣的CSS 屬性。

clip-path CSS 屬性可以建立一個只有元素的部分區域可以顯示的剪切區域。區域內的部分顯示，區域外的隱藏。剪切區域是被引用內嵌的 URL 定義的路徑或外部 SVG 的路徑。

也就是說，使用 clip-path 可以將一個容器裁切成任何我們想要的樣子。

透過3 個座標點，實作一個多邊形，多餘的空間會被裁減掉，程式碼也非常簡單：

div {
    background: deeppink;
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}

（學習影片分享：css影片教學）

以上是css3能不能實現三角形的詳細內容。更多資訊請關注PHP中文網其他相關文章！