纯css 实现菱形

直接代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>菱形</title>
    <style>
    .box2{
        position: relative;
        display: inline-block;
        flex: 1;
        overflow: hidden;
        overflow: visible;
    }
    .box2:after{
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        background: pink;
        transform: rotateZ(45deg)skew(30deg,30deg);
        margin-top: -14px;
        margin-left: -2px;
        border: 1px solid rgba(0,0,0,.25);
        border-bottom: none;
        border-left: none;
       
        /*transform: skew(20deg) rotate(45deg);*/

        content: "";
    }
    
    </style>
</head>

<body>
    <div class="box2"></div>
    <div class="box"></div>
</body>
 
</html>

　　

posted @ 2020-11-10 10:35  虚无——缥缈  阅读(3393)  评论(0)  编辑  收藏  举报