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

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;
}

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;
}

[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;
}

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;
}

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link href="css/square.css" rel="stylesheet" type="text/css">
        <title></title>
    </head>
    <body>
        <div class="main">
            <div class="disc1"></div>
            <div class="disc2"></div>
            <div class="square"></div>
        </div>
    </body>
</html>

*{
    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;
}

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

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

How to use attribute selectors in CSS?Jul 23, 2025 am 03:50 AM

In CSS, the attribute selector can set styles according to the attributes and values of the element, providing more flexible style control. ①Basic usage: Select elements with specific attributes, such as input[type] to match all inputs containing type attributes; ②Exact match: Use = to match specific attribute values, such as input[type="text"] to match only the text input box; ③ Partial match: Use = (include), ^= (start), and $= (end), to match part of the attribute values, such as a[href="//m.sbmmt.com/m/faq/example.com"] to match anchors containing specific links; ④Combination match: match multiple attributes at the same time, such as inputtype=&qu

What is the purpose of the CSS `will-change` property?Jul 23, 2025 am 03:47 AM

will-change is a CSS property that is used to inform browser elements in advance of possible changes to optimize performance. Its core function is to enable the browser to create layers in advance to improve rendering efficiency. Common values include transform, opacity, etc., and can also be separated by multiple attribute commas; it is suitable for non-standard attribute animations, complex component transitions and user interaction triggered animations; but it must be avoided abuse, otherwise it will lead to excessive memory usage or increased GPU load; the best practice is to apply before the change occurs and remove it after it is completed.

What is the difference between `display: none` and `visibility: hidden`?Jul 23, 2025 am 03:43 AM

The main difference between display:none and visibility:hidden is whether the element occupies space and its impact on the layout. 1.display:none will completely remove elements, do not take up space, and the layout will be readjusted; suitable for permanent or dynamic hidden elements. 2.visibility:hidden makes elements invisible but still retain their space and the layout remains unchanged; suitable for situations where structures need to be stable. 3.display:none hides all child elements at the same time, while visibility:hidden can control the display status of child elements separately. When selecting, it is determined based on whether the element is expected to affect the layout.

How to change text color in CSSJul 23, 2025 am 03:42 AM

To change the color of web page text, the most direct way is to use the color attribute of CSS. 1. Color can be set through color name, hexadecimal, RGB or HSL; 2. Different elements can be set separately, such as navigation links and paragraphs; 3. Flexible color matching is achieved through class selectors; 4. Note that the color attribute is inheritable, and the child elements will inherit the color of the parent element by default, and the style needs to be covered separately to avoid conflicts.

What is grid-auto-flow in CSS Grid?Jul 23, 2025 am 03:33 AM

Thegrid-auto-flowpropertyinCSSGridcontrolshowitemsareautomaticallyplacedwhennotexplicitlypositioned.Bydefault,it’ssettorow,fillingitemslefttoright,rowbyrow;changingittocolumnfillsitemstoptobottom,columnbycolumn.Itcanalsobepairedwithdensetocompactlayo

How to create a simple accordion with pure CSS?Jul 23, 2025 am 03:24 AM

Using pure CSS to achieve the accordion effect can be completed through HTML and tags. The specific steps are as follows: 1. Use and tags to achieve the expansion and collapse function, with clear semantics and support barrier-free access; 2. Set details borders, inner margins and other styles through CSS to unify the appearance, and hide the default arrows; 3. Note that multiple panels cannot be expanded at the same time through pure CSS restrictions, so JavaScript needs to be introduced to implement this function. In summary, basic functions do not require JS, but complex interactions still require script support.

Describe CSS paint orderJul 23, 2025 am 03:20 AM

In CSS, the order of drawing elements is affected by a variety of factors. By default, the browser draws in the order of positioning elements in the background and border → text content → child elements. 1. The default drawing order does not follow the DOM structure completely, but follows the painting order; 2. The hierarchy consists of whether the same stacking context belongs to the same stacking context and whether a new stacking context is created (such as transform, filter, opacity).

What is the difference between auto-fit and auto-fill in CSS Grid?Jul 23, 2025 am 03:17 AM

auto-fillcreatesasmanytracksaspossible,leavingemptyslotsiftherearen’tenoughitems,whileauto-fitresizestrackstofillthespace,avoidingemptiness.1.auto-fillmaintainsafixedstructure,generatingtracksevenifempty,idealforpredictablelayouts.2.auto-fitadjuststr

See all articles