css3 box-shadow 利用一個div實現紅綠燈圖案

思路：

      首先以一個div作為紅綠燈的黑色部分，然後使用after偽元素畫出一個黃色的圓並將其垂直水平居中到div中作為中間的燈，最後給after元素設定紅色和綠色的box-shadow並設定box-shadow的 x-offset將其移動到合適的位置，即可完成.

實現效果如下:

程式碼

style:
    .div {
      position: relative;
      width: 200px;
      height: 60px;
      border-radius: 30px;
      background: rgb(27, 27, 27);
    }
    .div::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 46px;
      height: 46px;
      background: yellow;
      border-radius: 50%;
      box-shadow: -50px 0 0 0 red, 50px 0 0 0 greenyellow;
    }
    
html:
    <div class="div"></div>
複製程式碼