CSS制作红桃心

最新推荐文章于 2021-07-20 11:59:24 发布

diue79978

最新推荐文章于 2021-07-20 11:59:24 发布

阅读量201

点赞数

原文链接：http://www.cnblogs.com/LCH-M/p/9335279.html

版权

这里主要用到了before与after属性之前之后

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>画画</title>
        <style>
        
            #xing{
                
                width: 100px;
                height: 80px;
                position: relative;
            }
            
            #xing:before{
                content: "";
                width: 50px;
                height: 80px;
                display: block;
                position: absolute;
                left: 50%;
                background: #FF0000;
                border-radius: 25px 25px 0 0;
                
                transform: rotate(-45deg);
                transform-origin: 0 100%;
            }
            
            #xing:after{
                content: "";
                width: 50px;
                height: 80px;
                display: block;
                background: red;
                transform: rotate(45deg);
                border-radius: 25px 25px 0 0;
                transform-origin: 100% 100%;
            }
            
        </style>
    </head>
    <body>
        <!--
  
            描述：1.1、、心形
        -->
       
        
     
        <div id="xing">
            
        </div>
        
        
    </body>
</html>

View Code

转载于:https://www.cnblogs.com/LCH-M/p/9335279.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

diue79978

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS制作红桃心

这里主要用到了before与after属性之前之后代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>画画</title> <style> ...
复制链接

扫一扫