cssでハートを描く方法(How to draw hearts using CSS)

2つの長方形のフィレットで斜めに変位し、1つのハートに結合します.

最初のステップは長方形(Draw a rectangle)を描きます

この長方形は愛の半分だ

  <div class="setp1">div>

  .setp1 {
    width: 50px;
    height: 100px;
    background: red;
  }

2ステップ目のフィレット(Cut the rounded)

丸く切って愛のように

  <div class="setp2">div>

  .setp2 {
    width: 50px;
    height: 100px;
    background: red;
    border-radius: 50% 50% 0 0
  }

第3ステップ傾斜(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);
  }

ステップ4マージ(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);
  }

ステップ5最適化(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);
    }

効果のプレビュー
(完)
転載先:https://juejin.im/post/5c19d92a5188252dcb3109dd