How to Create a Heart Shape Using CSS

How to create a heart shape using CSS?

CSS3 Mon Amour - A 4 Step Love Afair

There are a few steps for creating heart shape using CSS3:

Create a block-level element such as a <div> in your DOM and assign it with id="heart" and apply CSS:

#heart {
     position:relative; 
     width:100px; 
     height:90px;
     margin-top:10px; /* leave some space above */
}

Now using pseudo-element #heart:before we create a red box with one rounded edge like this:

#heart:before {
    position: absolute; 
    content: ""; 
    left: 50px; 
    top: 0; 
    width: 52px; 
    height: 80px; 
    background: red; /* assign a nice red color */
    border-radius: 50px 50px 0 0; /* make the top edge round */ 
}

Your heart should now look like this:

Sample Image

Let us assign a little rotation to that by adding:

#heart:before {
    -webkit-transform: rotate(-45deg); /* 45 degrees rotation counter clockwise */
       -moz-transform: rotate(-45deg); 
        -ms-transform: rotate(-45deg); 
         -o-transform: rotate(-45deg); 
            transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; /* Rotate it around the bottom-left corner */
       -moz-transform-origin: 0 100%; 
        -ms-transform-origin: 0 100%; 
         -o-transform-origin: 0 100%; 
            transform-origin: 0 100%;
}

And we now get:

Sample Image

Already starting to come together :).

Now for the right part we basically need the same shape only rotated
45 degrees clockwise instead of counter clockwise. To avoid code duplication we attach the css
of #heart:before also to #heart:after, and then apply the change
in position and in angle:

#heart:after { 
    left: 0; /* placing the right part properly */
    -webkit-transform: rotate(45deg); /* rotating 45 degrees clockwise */
       -moz-transform: rotate(45deg); 
        -ms-transform: rotate(45deg); 
         -o-transform: rotate(45deg); 
            transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; /* rotation is around bottom-right corner this time */
       -moz-transform-origin: 100% 100%; 
        -ms-transform-origin: 100% 100%; 
         -o-transform-origin: 100% 100%; 
            transform-origin :100% 100%; 
}

And voilà! a complete heart shaped <div>:

Sample Image

Snippet without any prefix:

#heart {  position: relative;  width: 100px;  height: 90px;  margin-top: 10px;}
#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);  transform-origin: 0 100%;}
#heart::after {  left: 0;  transform: rotate(45deg);  transform-origin: 100% 100%;}

<div id="heart"></div>

How to draw a heart using css only?

You can do this with pseudo elements

To learn more about pseudo elements

https://www.w3schools.com/css/css_pseudo_elements.asp

https://css-tricks.com/almanac/selectors/a/after-and-before/

https://www.hongkiat.com/blog/pseudo-element-before-after/

body{  padding-left:50px;}
div {  position: relative;  width: 100px;  height: 175px;  background-color: green;  -webkit-border-radius: 50px 50px 0 0;  -moz-border-radius: 50px 50px 0 0;  border-radius: 50px 50px 0 0;  -webkit-transform: rotate(315deg);  -moz-transform: rotate(315deg);  -ms-transform: rotate(315deg);  -o-transform: rotate(315deg);  transform: rotate(315deg);}
div:before {  position: absolute;  width: 175px;  height: 100px;  left: 0;  bottom: 0;  content: "";  background-color: green;  -webkit-border-radius: 50px 50px 0 0;  -moz-border-radius: 50px 50px 0 0;  border-radius: 0 50px 50px 0;}

<div></div>

How to make a resizable heart in CSS with a border

Probably my heart will do a better job even if still not perfect

.heart {
  width:200px;
  height:200px;
  background:
   radial-gradient(90% 90% at 60% 65%, transparent calc(64% - 1px), black 64%, transparent calc(64% + 1px)) top left,
   radial-gradient(90% 90% at 40% 65%, transparent calc(64% - 1px), black 64%, transparent calc(64% + 1px)) top right,
   linear-gradient(to bottom left,     transparent calc(43% - 1px), black 43%, transparent calc(43% + 1px)) bottom left ,
   linear-gradient(to bottom right,    transparent calc(43% - 1px), black 43%, transparent calc(43% + 1px)) bottom right;
  background-size:50% 50%;
  background-repeat:no-repeat;
  border:2px solid red;
  overflow:hidden;
  resize:both;
}

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

How to draw heart using HTML/CSS table?

If you really only want to use the 'nth-child' then use the following:

First row:

table tr:nth-child(1) td:nth-child(3),
table tr:nth-child(1) td:nth-child(5) {
  background-color:red;
}

So, in your table, the first tr followed by the 3rd and 5th td should have red background. Apply the same logic for all the following rows.

For the second row you could use the nth-last-child too:

table tr:nth-child(2) td:nth-child(n+2):nth-last-child(n+4) {
  background-color:red;
}

The whole solution then comes out like this:

table tr:nth-child(2) td:nth-child(4),
table tr:nth-child(2) td:nth-child(6),
table tr:nth-child(3) td:nth-child(n+3):nth-last-child(n+3),
table tr:nth-child(4) td:nth-child(n+3):nth-last-child(n+3),
table tr:nth-child(5) td:nth-child(n+4):nth-last-child(n+4),
table tr:nth-child(6) td:nth-child(n+5):nth-last-child(n+5) {
  background-color:red;
}

If you were looking for a formula that describes a heart shape, then you could start here for example:
http://mathworld.wolfram.com/HeartCurve.html

But implementing such a formula is out of scope of CSS I think.

CSS advanced shape (heart cut out of background)

Heart shape cut out using box-shadow

Let's create this — the blue is the background color of `<body>`

Screenshot

The pieces

Feel free to skip directly to the complete demo at the bottom of this answer :)

1 - The rounded corners

The rounded top left and top right corners are created with box-shadow on the two pseudo elements with border-radius: 50% — .heart:before and .heart:after — They form two crescent shapes that look like this:

Crescent Shapes

2 - The angle

The angled shape is created by the box-shadow on .heart. Combined with the two circles, it looks like this:

Angled Shape

3 - The filler

We now need to fill in the gaps. This is done by the pseudo elements of the .box-shape container — .shape-box:before and .shape-box:after. The excess is cut-off neatly with overflow: hidden on the .shape-box. Combined with our pieces above, they look like this:

The filler

The Complete Example

Combine it all together and we get this nicely cut out heart shape. It is all contained in .shape-box.

body {
  background: #00A2F6;
}
.shape-box {
  height: 504px;
  width: 504px;
  position: relative;
  margin: 100px;
  overflow: hidden;
}
.shape-box:before,
.shape-box:after {
  content: '';
  display: block;
  height: 100px;
  width: 120px;
  background: #2B2B2B;
  transform: rotate(45deg);
  left: 190px;
  position: absolute;
  top: 40px;
}
.shape-box:after {
  width: 760px;
  height: 750px;
  box-shadow: inset 0 0 0 220px #2B2B2B;
  top: -150px;
  left: -130px;
  background: none;
}
.heart {
  transform: rotate(45deg);
  height: 357px;
  width: 356px;
  box-shadow: inset 0 0 0 50px #2B2B2B;
  position: absolute;
  left: 74px;
  top: 34px;
}
.heart:before,
.heart:after {
  content: '';
  display: block;
  width: 151px;
  height: 151px;
  border-radius: 50%;
  box-shadow: -40px -15px 0 20px #2B2B2B;
  position: absolute;
  left: 50px;
  top: 157px;
}
.heart:after {
  box-shadow: -15px -40px 0 21px #2B2B2B;
  left: 156px;
  top: 51px;
}

<div class="shape-box">
  <div class="heart"></div>
</div>

Is it possbile to make heart shaped input html button/element?

hide the checkbox itself with input { display none; }. Then add the heart either as SVG or as HTML/Unicode within the label. YOu can use input:checked ~ label as selector to add changes within CSS.

/* hides the checkbox */
input {
  display: none;
}

/* changes the color when selected */
input:checked ~ label {
  color: red;
}

/* for styling purpose only */
label {
  font-size: 5em;
}

<input type="checkbox" id="heart">
<label for="heart">♥</label>

How to modify CSS heart to insert inside image?

All the existing answers help you to place an image on top of a heart shape but not crop or cut it into a heart shape. The only existing answer that would help you achieve the latter is the clip-path model but that code produces a different output shape (its probably more a sample on how to do than a direct answer to your question).

For inserting an image in to the heart shape (I assume you mean cutting the image into a heart shape), don't use your existing approach. It is very tough because you that CSS method creates the shape by using two rotated elements. So, you'd have to go through the pain of - (a) split the image into two bits (b) place each half on each side (c) reverse rotate the images to nullify the effect the initial rotation that was set on the element (d) set background-position for each half of the image such that they match accurately etc. Even after going through all these troubles, you'd still face problems when the image is dynamic because setting background-position via percentage value work a lot more differently than what we think.

Use SVG: SVG is the recommended tool for creating such complex shapes with a background that is not a solid color.

With SVG, we can easily create complex shapes using the path element and also add an image as background or fill. SVGs are scalable and so are highly useful in responsive design. Using SVGs also allow us greater control over the shape itself.

Below is a heart shape that is created using SVG and having an image inserted into it as background.

svg {  height: 200px;  width: 200px;}path {  fill: url(#bg-image);}body {  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);}

<svg viewBox='0 0 100 100'>  <defs>    <pattern id='bg-image' width='1' height='1' patternUnits='objectBoundingBox'>      <image xlink:href='https://placeimg.com/100/100/nature/7' width='100' height='100' />    </pattern>  </defs>  <path d='M50,90 L20,60            A15,15 0 0,1 50,30            A15,15 0 0,1 80,60 z' /></svg>

Get heart-shaped border using CSS?

try to use font awesome LINK

You can use "fa-heart-o" class instead of using this much code

HTML:

<i class="fa fa-heart-o"></i>

How to Create a Heart Shape Using CSS