CSS3怎么畫(huà)心？

在CSS3中，我們可以使用各種樣式和屬性來(lái)繪制圖形，繪制心形是一種常見(jiàn)的需求，下面是一種簡(jiǎn)單的方法，使用純CSS3來(lái)繪制一個(gè)心形。

我們需要?jiǎng)?chuàng)建一個(gè)HTML元素，例如一個(gè)div，來(lái)承載我們的心形，我們可以使用CSS3的樣式和屬性來(lái)定義這個(gè)元素的樣式。

以下是一個(gè)示例代碼：

HTML代碼：

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

CSS3代碼：

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

在這個(gè)示例中，我們使用了兩個(gè)偽元素（::before和::after）來(lái)繪制心形，每個(gè)偽元素都定義了一個(gè)三角形，通過(guò)旋轉(zhuǎn)和定位來(lái)組合成心形，我們還使用了border-radius屬性來(lái)使三角形的角更加圓潤(rùn)，更加符合心形的形狀，我們給心形填充了顏色，使其更加醒目。