We have seen many drawing of hearts using math equations [here] and [here], the following demonstrates how to draw (or make) a heart using the pure CSS3 techniques.
First, you need to define a container, e.g. using the div and assign it with the heart class/style name.
1 | <div class='heart'></div> |
<div class='heart'></div>
Now, let’s make it a red square, but also rotate it by 45 degree, which makes it essentially a rhombus/diamond.
1 2 3 4 5 6 7 8 9 10 11 | .heart { transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); background: red; position: relative; width: 200px; height: 200px; } |
.heart {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
background: red;
position: relative;
width: 200px;
height: 200px;
}Now, through the :after and :before elements, we draw to idendical circles:
1 2 3 4 5 6 7 8 9 | .heart:before, .heart:after { content: ''; width: 200px; height: 200px; border-radius: 100%; position: absolute; display: block; background: red; } |
.heart:before, .heart:after {
content: '';
width: 200px;
height: 200px;
border-radius: 100%;
position: absolute;
display: block;
background: red;
}and move these circles to the right positions of the div element.
1 2 3 4 5 6 7 8 | .heart:after { top: -50%; right: 0; } .heart:before { top: 0; left: -50%; } |
.heart:after {
top: -50%;
right: 0;
}
.heart:before {
top: 0;
left: -50%;
}
heart
–EOF (The Ultimate Computing & Technology Blog) —
GD Star Rating
loading...
366 wordsloading...
Last Post: How to Protect Your WordPress Login from Brute-Force Attacks - Simple Approach?
Next Post: How to Use Keyboard Arrow Keys for WordPress Posts Navigation?
