Through interesting and vivid pictures, learn how to draw a heart using pure CSS! !-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Through interesting and vivid pictures, learn how to draw a heart using pure CSS! !

青灯夜游

Apr 30, 2021 am 10:15 AM

csslove

This article will introduce to you how to draw a heart using pure CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Through interesting and vivid pictures, learn how to draw a heart using pure CSS! !

Requirements/Function:

How to use CSS HTMl to draw a love.

Analysis:

A heart can be formed by combining a square and two circles. (Learning video sharing: css video tutorial)

1. First draw a square circle and place it as follows:

Through interesting and vivid pictures, learn how to draw a heart using pure CSS! !

2. Add a circle.

Through interesting and vivid pictures, learn how to draw a heart using pure CSS! !

3. Finally, rotate the entire shape 45 degrees clockwise.

Through interesting and vivid pictures, learn how to draw a heart using pure CSS! !

Initial implementation:

1. First draw a square:

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

#heart{
       height: 300px;
       width: 300px;
       border: 2px solid black;
    }

2. Add a circle to the left side of the square. Use the pseudo class: before here. Implementation

     #heart{
            height: 200px;
            width: 200px;
            border: 2px solid black;
            position: relative;
        }
    #heart:before{
        content: &#39;&#39;;
        width: 200px;
        height: 200px;
        border: 2px solid black;
        border-radius: 50%; // 正方形加圆角变成圆
        position: absolute;
        left: -100px;  // 向左位移正方形一半的长度
    }

At this time, the graphic looks like this:

Through interesting and vivid pictures, learn how to draw a heart using pure CSS! !

3. Add another circle, which is implemented here using the after pseudo-class.

    #heart{
            height: 200px;
            width: 200px;
            border: 2px solid black;
            position: relative;
        }
        // 这里偷个懒.直接写一块了
    #heart:before,#heart:after{
        content: &#39;&#39;;
        width: 200px;
        height: 200px;
        border: 2px solid black;
        border-radius: 50%;
        position: absolute;
        left: -100px;
    }
    // 第二个圆, 只需要向上位移正方形一半的高度
    #heart:after{
        left: 0;
        top: -100px;
    }

Through interesting and vivid pictures, learn how to draw a heart using pure CSS! !

4. The last step, rotate it, and then add a color. Remove the border added before to see clearly.

    /*给heart进行旋转并加上颜色*/
  transform: rotate(45deg);
  background-color: red;

Through interesting and vivid pictures, learn how to draw a heart using pure CSS! !

Complete Code:



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

Summary:

A heart can be composed of a square and two circles. The before and after pseudo-classes are used here. Then, the two pseudo-classes are displaced respectively. Finally, the extrusion By adding color, you can realize a love.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of Through interesting and vivid pictures, learn how to draw a heart using pure CSS! !. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete

A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties