一、使用 CSS 實現三角形的技巧

1、使用 border 繪制三角形：利用了高寬為零的容器及透明的 border 實現

div {
  width: 0px;
  height: 0px;
  margin: auto;
}

.normal {
   border-top: 50px solid yellowgreen;
   border-bottom: 50px solid deeppink;
   border-left: 50px solid bisque;
   border-right: 50px solid chocolate;
}

.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;
}

<div class='normal'></div>
<div class='top'></div>
<div class='bottom'></div>
<div class='left'></div>
<div class='right'></div>

2、使用 linear-gradient 繪制三角形：它的原理就是實現一個 45° 的漸變

div {
  width: 100px;
  height: 100px;
  margin: auto;
}
.normal {
  background: linear-gradient(45deg, deeppink, yellowgreen);
}

.gradient{
  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}

.rotate {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}

.top {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
  transform: rotate(135deg);
}

.left {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
  transform: rotate(45deg);
}

.bottom {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
  transform: rotate(-45deg);
}

.right {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
  transform: rotate(-135deg);
}
<div class='normal'></div>
<div class='top'></div>
<div class='bottom'></div>
<div class='left'></div>
<div class='right'></div>

3、使用 conic-gradient 繪制三角形：角向漸變 conic-gradient 也可以用于實現三角形。方法在于，角向漸變的圓心點是可以設置的，我們將角向漸變的圓心點設置于 50% 0，也就是 center top，容器最上方的中間，再進行角向漸變，漸變到一定的角度范圍內，都是三角形圖形。
假設我們有一個 200px x 100px 高寬的容器，設置其角向漸變圓心點為 50% 0，并且，設置它從 90° 開始畫角向漸變圖，示意圖如下：

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

div {
    width: 200px;
    height: 100px;
    margin: auto;
}
.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);
}
<div class="normal"></div>
<div class="acute"></div>

上述代碼中的 deeppink 45deg, transparent 45.1deg 多出來的 0.1deg 是為了簡單消除漸變產生的鋸齒的影響，這樣，我們通過 conic-gradient，也輕松的得到了一個三角形。同理，再配合旋轉 rotate 或者 scale，我們也能得到各種角度，不同大小的三角形。
4、transform: rotate 配合 overflow: hidden 繪制三角形
設置圖形的旋轉中心在左下角 left bottom，進行旋轉，配合 overflow: hidden

.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;
    }
}
<div class="triangle"></div>

5、使用 clip-path 繪制三角形：clip-path CSS 屬性可以將一個容器裁剪成任何我們想要的樣子，通過 3 個坐標點，實現一個多邊形，多余的空間則會被裁減掉

div {
    width: 100px;
    height: 100px;
    margin: auto;
}
.triangle {
    background: deeppink;
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
<div class="triangle"></div>

6、利用字符繪制三角形
下面列出一些三角形形狀的字符的十進制 Unicode 表示碼

? : ◄ 
? : ► 
▼ : ▼ 
▲ : ▲
⊿ : ⊿
△ : △

我們使用 ▼ 實現一個三角形 ▼，代碼如下：

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Dela+Gothic+One&family=New+Tegomin&family=Train+One&family=ZCOOL+QingKe+HuangYou&display=swap');
div {
    font-size: 100px;
    color: deeppink;
}
<div class="normal">&#9660; </div>

需要注意的是，使用字符表示三角形與當前設定的字體是強相關的，不同的字體繪制出的同一個字符是不一樣的，所以如果你想使用字符三角形，確保用戶的瀏覽器安裝了你指定的字體，否則，不要使用這種方式

二、純 CSS 實現霓虹燈光

要實現的效果：在鼠標移入按鈕的時候，會產生類似霓虹燈光的效果；在鼠標移出按鈕的時候，會有一束光沿著固定的軌跡（按鈕外圍）運動，如下圖：

1、霓虹燈光的實現：霓虹燈光的實現可以用多重陰影來做。給按鈕加三層陰影，從內到外每層陰影的模糊半徑遞增，這樣多個陰影疊加在一起，就可以形成一個類似霓虹燈光的效果。代碼如下：

body {
 background: #050901;   
}
.light {
  width: fit-content;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}
 <div class="light">
    Neon Button
 </div>

2、運動光束的實現：雖然看起來只有一個光束沿著按鈕的邊緣運動，但實際上這是四個光束沿著不同方向運動之后疊加的效果。它們運動的方向分別是：從左往右、從上往下、從右往左、從下往上。

• 四個光束分別對應 div.light 的四個子 div，初始位置分別是在按鈕的最左側、最上方、最右側和最下方，并按照固定的方向做重復的運動
• 每個光束的高度或寬度都很小（只有 2px），并且都有一個從透明色到霓虹色的漸變，因此外表會有一個收束的效果（即看上去不是一條完整的線條）
• 為了確保我們看到的是一個順時針方向的運動，四個光束的運動實際上是有序的，首先是按鈕上方的光束開始運動，在一段時間后，右側的光束運動，在一段時間后，下方的光束運動，在一段時間后，左側的光束運動。光束和光束之間的運動有一個延遲，以上方和右側的光束為例，如果它們同時開始運動，由于右側的運動距離小于上方的運動距離，就會導致這兩個光束錯過相交的時機，我們看到的就會是斷開的、不連貫的光束。既然右側光束的運動距離比較短，為了讓上方光束可以“追上”它，我們就得讓右側光束“延遲出發(fā)”，因此要給它一個動畫延遲；同理，剩余兩個光束也要有一個動畫延遲。多個動畫延遲之間大概相差 0.25 秒即可。
• 只需要顯示按鈕邊緣的光束就夠了，因此給 div.light 設置一個溢出隱藏

.light {
  position: relative;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
  overflow: hidden;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}
.light div {
  position: absolute;
}
.light div:nth-child(1){
  width: 100%;
  height: 2px;
  top: 0;
  left: -100%;
  background: linear-gradient(to right,transparent,#03e9f4);
  animation: animate1 1s linear infinite;
}
.light div:nth-child(2){
  width: 2px;
  height: 100%;
  top: -100%;
  right: 0;
  background: linear-gradient(to bottom,transparent,#03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
.light div:nth-child(3){
  width: 100%;
  height: 2px;
  bottom: 0;
  right: -100%;
  background: linear-gradient(to left,transparent,#03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
.light div:nth-child(4){
  width: 2px;
  height: 100%;
  bottom: -100%;
  left: 0;
  background: linear-gradient(to top,transparent,#03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

<div class="light">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    Neon Button
</div>