首页 > 其他分享 >使用HTML和CSS做出心形图案

使用HTML和CSS做出心形图案

时间:2023-10-11 22:06:53浏览次数:41  
标签:pink 心形 top 100px height HTML radius border CSS

今天我们要做一个心形图案,闲来无事可以尝试做一些其他图案。也可以用来逗心爱的女孩开心。例如:

使用HTML和CSS做出心形图案_心形制作

先看步骤

使用HTML和CSS做出心形图案_心形制作_02

先给正方形上方和右方两侧做两个圆

使用HTML和CSS做出心形图案_html_03

圆的做法就是border-radius:50%,就是圆形了

使用HTML和CSS做出心形图案_html_04

最后给他们翻转45°

下面是整体代码,大家想尝试直接复制到自己代码中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            position:relative;
            width:100px;
            height:100px;
            background:pink;
            margin-left:100px;
            margin-top:100px;
            transform:rotate(-45deg);

        }
        .one:before{
            content:"";
            position:absolute;
            width:100px;
            height:100px;
            background-color:pink;
            border-radius:50%;
            top:-50px;
            left:0;
        }
        .one:after{
            content:"";
            position:absolute;
            background-color:pink;
            border-radius:50%;
            height:100px;
            width:100px;
            left:50px;
            top:0;
        }

    </style>
</head>
<body>
<div class="one"></div>
</body>
</html>


标签:pink,心形,top,100px,height,HTML,radius,border,CSS
From: https://blog.51cto.com/u_16281588/7816346

相关文章

  • 记录--纯CSS实现骚气红丝带
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助在本文中,我们将探讨如何使用CSS以最少的代码创造出精美的CSS丝带形状,并最终实现下面这个效果:下面我们使用html和css来实现这个效果。我们使用内容自适应方式布局,不用担心里面的文字长度。本文介绍两种丝带:左......
  • html 图片地图
    <html><head><title></title></head><body><imgsrc="8d030589-1af1-4fec-bfc9-d1a7ad1b23f2.png"usemap="#image-map"><mapname="image-map"><areatarget=&qu......
  • 开局就集成tailwindcss(一)
    1.使用cli创建项目npmcreatevite@latest项目名--templatereact-ts 2.因为css功底偏弱,所以必须也是完全有必要的,在这里必须集成一下tailwindcss,npminstalltailwindcssautoprefixerpostcss-cli#额外的安装2个配套的插件#autoprefixer自动添加样式的前缀,很......
  • CSS 多行文本超链接下划线动效
    先看效果乍一看,是不是感觉很简单,仔细一瞅发现事情好像没有那么简单。如果十分钟还没想出怎么实现,那就把简历上的“精通css”改成“了解css”……......
  • 为什么 CSS flex 布局中没有 `justify-items` 和 `justify-self`?
    为什么CSSflex布局中没有justify-items和justify-self?为什么在CSSflex布局中存在align-items和align-self,却没有justify-items和justify-self呢?要解答这个问题,首先需要理解主轴(mainaxis)和交叉轴(crossaxis)之间的差异。1.主轴和交叉轴的区别在没有折行的情况......
  • 使用jquery的html()判断Table元素为空时的bug
    在使用jquery的html()函数判断接点为空时从服务器端取数据,不为空时则不再取数据,这样减少与服务器的交互。使用元素<divid="test"></div>使用if(!$("#test").html())判断没有问题使用<tableid="test"></table>时出现问题,判断时总不为空,用alert($("#t......
  • HtmlWebpackPlugin作用
    当我们更改了我们的一个entry入口起点的名称,甚至添加了一个新的入口,会发生什么?会在构建时重新命名生成的bundle,但是我们的 index.html 文件仍然引用旧的名称。此时就可以用 HtmlWebpackPlugin 来解决这个问题。在我们构建之前,虽然在 dist/ 文件夹我们已经有了 index.ht......
  • threejs CSS2DObject点击事件触发不了
    原因:在three.js  0.13X版本后,上面dom的onclick不会触发,原因是控制器Controls,可以尝试一下去掉控制器,看看dom上的点击事件是否ok letobtControls=newOrbitControls(camera,container); // OrbitControls对页面的事件进行监听,并且阻止穿透 ......
  • css_扩散动效
    html<divid="modelContainer"class="init"><divclass="mask"></div><divclass="model_content"><divclass="attention_container"><divclass="dot"......
  • html实现NBA总决赛统计表
    案例注意事项:1.注意背景图片不需要用img实现,因为img标签中的title是鼠标悬停在图片上的时候显示的内容。实现效果图:代码:<!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-s......