CSS打造愛心符號

在CSS中，我們可以使用各種樣式來創(chuàng)建有趣的圖形，包括愛心符號，下面是一些示例代碼，展示如何使用CSS來制作一個基本的愛心符號：

<div class="heart"></div>

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.heart::before, .heart::after {
  content: "";
  position: absolute;
  top: 40px;
  width: 52px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: red;
}
.heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

在這個示例中，我們創(chuàng)建了一個名為heart的類，用于定義愛心的樣式，我們使用偽元素::before和::after來創(chuàng)建愛心的兩個部分，并通過transform屬性來旋轉(zhuǎn)它們，以形成一個完整的心形，我們還使用了position屬性來定位愛心的位置，并使用width和height屬性來定義愛心的尺寸，我們使用border-radius屬性來使愛心的邊角更加圓潤。