欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

①html画桃心两种实现

程序员文章站 2022-07-12 22:39:45
...

简单记录

html画桃心的两种实现

第一种代码

<style>
    body{
        margin: 0;    /* 外边距清除 */
    }
    .heart{
        position:relative;
        width: 100px;/* 宽度：200像素 */
        height: 100px;/* 同理高度 */
        margin: 50px auto;/* 对应 上下  左右  auto自动居中 */
        background-color: #969696;/* 父盒子背景 */
    }
    .right{
  		top: 0px;
        left: 0px;
        position:absolute;
        width: 50px;
        height: 75px;
        background-color: red;
        border-radius: 25px 25px 0 0;/* css3圆角属性 */
        transform: rotate(-45deg);/* css3变换属性  旋转（角度） */
    }
    .left{
    	top: 0px;
        left: 0px;
        position:absolute;
        width: 50px;
        height: 75px;
        background-color: red;
        border-radius: 25px 25px 0 0;/* css3圆角属性 从左上顺时针对应*/
        transform: translateX(18px) rotate(45deg);
    }
</style>
<body>
    <div class="heart"> <!-- class自定义类名  盒子标签 -->
        <div class="right"></div><!-- 盒子右转 -->
        <div class="left"></div><!-- 盒子左转 -->
    </div>
</body>

实现效果：
①html画桃心两种实现

第二种代码

<style>
    body{
        margin: 0px;
    }
    .heart{
        position: relative;
        width: 100px;
        background-color: gray;
        height: 100px;
        margin: 50px auto;
    }
    .heart:before,.heart:after{
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        height: 75px;
        width: 50px;
        background-color: red;
        border-radius: 25px 25px 0 0 ;
    }
    .heart:before{
        transform: rotate(-45deg);
    }
    .heart:after{
        transform: translateX(18px) rotate(45deg);
    }
</style>
<body>
    <div class="heart"></div>
</body>

实现效果一样的
简单来看：代码更加量少了，性能优化

相关标签： html 桃心

上一篇： Verilog HDL FPGA 计数器的设计及流水灯设计。

下一篇： GO语言一个简单的登录框程序

推荐阅读