Creating a Heart Shape with HTML and CSS

In this tutorial, we'll explore a simple yet elegant way to craft a heart shape using HTML and CSS. Follow the steps below to bring a charming heart to life on your webpage:

HTML Code:

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

CSS Code:

.heart {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
  transform: rotate(-45deg);
  margin: 50px;
}

.heart::before,
.heart::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
}

.heart::before {
  top: -100px;
  left: 0;
}

.heart::after {
  top: 0;
  left: 100px;
}

Now, by combining these HTML and CSS snippets and opening the HTML file in a web browser, you'll witness a visually appealing heart shape. Feel free to experiment with dimensions, colors, and styles to make it uniquely yours!