①html画桃心两种实现

feng_初学者

已于 2024-05-13 14:58:34 修改

阅读量2.1k

点赞数 5

分类专栏： html 文章标签： html 桃心

于 2019-10-04 18:34:42 首次发布

本文链接：https://blog.csdn.net/qq_42356790/article/details/102082605

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简单记录

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>

实现效果：
在这里插入图片描述

第二种代码

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

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

feng_初学者

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
①html画桃心两种实现

简单记录html画桃心的两种实现第一种代码<style> body{ margin: 0; /* 外边距清除 */ } .heart{ position:relative; width: 100px;/* 宽度：200像素 */ height: 100px;/* 同理高度 */ ...
复制链接

扫一扫