<div class="heart"></div>
.heart {
margin-top: 20px;
margin-left: 50px;
width: 1px;
height: 1px;
transform:scale(20);
font-size: 20px;
box-shadow:
/* 1st row */ 1px 0, 2px 0, 6px 0, 7px 0,
/* 2nd row */ 0 1px, 1px 1px red, 2px 1px red, 3px 1px, 5px 1px, 6px 1px red, 7px 1px red, 8px 1px,
/* 3rd row */ 0 2px, 1px 2px red, 2px 2px red, 3px 2px red, 4px 2px, 5px 2px red, 6px 2px red, 7px 2px red, 8px 2px,
/* 4th row */ 0 3px, 1px 3px red, 2px 3px red, 3px 3px red, 4px 3px red, 5px 3px red, 6px 3px red, 7px 3px red, 8px 3px,
/* 5th row */ 1px 4px, 2px 4px red, 3px 4px red, 4px 4px red, 5px 4px red, 6px 4px red, 7px 4px,
/* 6th row */ 2px 5px, 3px 5px red, 4px 5px red, 5px 5px red, 6px 5px,
/* 7th row */ 3px 6px, 4px 6px red, 5px 6px,
/* 8th row */ 4px 7px;
}
.pixel-heart {
color: red;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.