CSS画图的各种奇技淫巧（三角形、爱心）

1.三角形

利用border之间分开的角度，进行绘制

步骤：（1）将content为0*0 （2）border-top 50px pink（3）其他两边透明，不可少（4）根据三边的宽度来设置三角形的大小

div{
            width: 0px;
            height: 0px;
            border-top: 50px solid pink;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent;
}

三角形的底、高与 border宽度有关

CSS画图的各种奇技淫巧（三角形、爱心）

2.爱心

简单，不用多加解释了

    <div class="heart"></div>

        .heart{
            width: 200px;
            height: 100px;
            position: relative;
            /*display: inline-block;*/
            border: 1px solid;
            padding-top: 30px;
        }
        .heart:before, .heart:after{
            content: "";
            position: absolute;
            width: 70px;
            height: 40px;
            background-color: pink;
        }
        .heart:before{          
            border-radius: 20px 0 0 20px;
            transform: rotate(45deg);
            transform-origin: bottom right;
        }
        .heart:after{
            left: 70px;
            border-radius: 0 20px 20px 0;
            transform: rotate(-45deg);
            transform-origin: bottom left;
        }

CSS画图的各种奇技淫巧（三角形、爱心）

相关推荐