如何用 css 畫一個心形

PsChina發表於2018-12-19
CSS

如何用 css 畫一個心形 (How to draw hearts using CSS)

用兩個長方形切圓角傾斜位移併合併為一個心形

第一步 畫一個長方形 (Draw a rectangle)

這個長方形就是愛心的一半

  <div class="setp1"></div>
複製程式碼
  .setp1 {
    width: 50px;
    height: 100px;
    background: red;
  }
複製程式碼

第二步 切圓角 (Cut the rounded)

切個圓角使得它更加像愛心

  <div class="setp2"></div>
複製程式碼
  .setp2 {
    width: 50px;
    height: 100px;
    background: red;
    border-radius: 50% 50% 0 0
  }
複製程式碼

第三步 傾斜 (Tilt)

傾斜一下完成愛心的一半

  <div class="setp3">
    <div class="setp2"></div>
  </div>
複製程式碼
  .setp2 {
    width: 50px;
    height: 100px;
    background: red;
    border-radius: 50% 50% 0 0
  }
  .setp3 {
    position: relative;
    left: 30px;
  }
  .setp3 > div {
    transform: translate(-18px,0) rotate(-45deg);
  }
複製程式碼

第四步 合併 (Merge)

另一半如法炮製合併成一個愛心

  <div class="setp4">
    <div class="setp2 left"></div>
    <div class="setp2 right"></div>
  </div>
複製程式碼
  .setp4{
    position: relative;
    left: 30px;
    height: 120px;
  }
  .setp4 > div {
    position: absolute;
    left: 0;
  }
  .left{
    transform: translate(-18px,0) rotate(-45deg);
  }
  .right{
    transform: translate(18px,0) rotate(45deg);
  }
複製程式碼

第五步 優化 (Optimize)

我們發現一個愛心用了 3 個 div 冗餘結構太多了讓我們優化一下。

用偽類代替冗餘結構。

  <div class="heart">
  </div>
複製程式碼
    .heart{
      position: relative;
      left: 30px;
    }
    .heart:after {
      border-left: 25px solid red;
      border-right: 25px solid red;
      border-top: 50px solid red;
      border-bottom: 50px solid red; 
      border-radius: 50% 50% 0 0;
      content: "";
      position: absolute;    
      top: 0;
      left: 0;
      transform: translate(-18px,0) rotate(-45deg);
    }
    .heart:before {
      border-left: 25px solid red;
      border-right: 25px solid red;
      border-top: 50px solid red;
      border-bottom: 50px solid red;
      border-radius: 50% 50% 0 0;
      content: "";
      position: absolute;    
      top: 0;
      left: 0;
      transform: translate(18px,0) rotate(45deg);
    }
複製程式碼

效果預覽

(完)

相關文章