CSS实现爱心的画图

最新推荐文章于 2023-03-29 02:22:25 发布

samscat

最新推荐文章于 2023-03-29 02:22:25 发布

阅读量355

点赞数

分类专栏： css 文章标签： css 爱心

原文链接：https://blog.csdn.net/chenhongwu666/article/details/38905803

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

*CSS实现爱心的画图

#heart{
width: 100px;
height: 90px;
position: relative;
}
#heart:before,#heart:after{
width: 50px;
height: 80px;
left: 50px;
top: 0;
background-color: red;
position: absolute;
content: "";
-moz-border-radius:50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-o-transform-origin:0 100%;
tansform-origin:0 100%;
}
#heart:after{
left: 0;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
}