How to make a red heart with css-CSS Tutorial-php.cn

Table of Contents

Preliminary knowledge: " > Preliminary knowledge:

Without further ado, let me first teach you how to draw a circle using CSS.

Home

Web Front-end

CSS Tutorial

How to make a red heart with css

Feb 28, 2021 pm 03:17 PM

css

How to make a red heart with css: first create an HTML sample file; then define a div and draw a circle through css attributes; then make a square; and finally use the rotate attribute in css transform Just implement the love style.

How to make a red heart with css

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Make a love with css

Abstract: HTML tags are relatively simple, and getting started is very fast, but CSS is something that requires us to dig deeply. , many of the style attributes in it can be achieved by mastering a few commonly used ones to achieve beautiful effects. Now I will teach you how to use CSS to make a heart.

Preliminary knowledge:

Understand how to draw a square.
Understand how to draw circles.
Understand what positioning is.
Know how to rotate.

Without further ado, let me first teach you how to draw a circle using CSS.

.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}

Copy after login

Since our love is composed of two circles and a square, we need another circle.

.disc2{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:250px 0px 0px 0px;
    border-radius:100%;
    float:left;
    position: relative;
    right: 50px;
}

Copy after login

[Recommended: "css video tutorial"]

In the third step, we need to make a square.

.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

Copy after login

The effect of doing this has basically come out, but we still need to adjust the angle of the love. At this time, we need to use the rotate attribute in the transform in our css style.

Since we need to rotate all three p's by angle, we put these three p's inside one p. The specific code is as follows:

.main{
    transform: rotate(45deg);
    margin: 300px;
}

Copy after login

By now, our love has been made. The rendering is as follows:

All codes are as follows (including HTML code and CSS code)

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot; /&gt;
        &lt;link href=&quot;css/square.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class=&quot;main&quot;&gt;
            &lt;div class=&quot;disc1&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;disc2&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;square&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

*{
    margin: 0px;
    padding: 0px;
}
.main{
    transform: rotate(45deg);
    margin: 300px;
}
.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}
.disc2{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:250px 0px 0px 0px;
    border-radius:100%;
    float:left;
    position: relative;
    right: 50px;
}
.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

Copy after login

The above is the detailed content of How to make a red heart with css. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn