HTMLとCSSでハートの形を作る方法

2024-02-15 08:29 HTML CSS ハート形

方法1: 疑似要素を使用する方法

<!DOCTYPE html>
<html>
<head>
<style>
.heart {
  position: relative;
  width: 100px;
  height: 100px;
}
.heart::before,
.heart::after {
  content: '';
  position: absolute;
  top: 0;
  width: 52px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: red;
}
.heart::before {
  left: 50px;
  transform: rotate(-45deg);
}
.heart::after {
  left: 0;
  transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>

方法2: SVGを使用する方法

<!DOCTYPE html>
<html>
<head>
<style>
svg {
  width: 100px;
  height: 100px;
  fill: red;
}
</style>
</head>
<body>
<svg viewBox="0 0 32 29.6">
  <path d="M16 29.6C7.2 29.6 0 22.4 0 14.8C0 7.2 7.2 0 16 0C24.8 0 32 7.2 32 14.8C32 22.4 24.8 29.6 16 29.6Z"/>
</svg>
</body>
</html>

方法3: CSSグラデーションを使用する方法

<!DOCTYPE html>
<html>
<head>
<style>
.heart {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at top, red 50%, transparent 50%);
  border-radius: 50%;
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>

これらはいくつかのハート形の作成方法の例です。他にも様々なアプローチがありますので、試してみてください。HTMLとCSSを使ってハートの形を作成することは、ウェブデザインの面白いチャレンジです。