纯css3实现不规则边框纯css3实现不规则边框 1.使用伪类，在元素前或后插入内容 2.linear-gradient

纯css3使用skew实现不规则边框

1.使用伪类，在元素前或后插入内容 2.linear-gradient渐变使用 3.skew 使用截屏2022-04-11 上午12.36.18.png 代码附上：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用伪类，在元素前或后插入内容</title>
    <style>
        body {
            margin: 50px auto;
            width: 80%;
            background-color: #060c21;
        }

        .box {
            position: relative;
            width: 250px;
            height: 300px;
            background-color: #060c21;
            padding: 4px;
        }

        .box:before {
            content: "";
            position: absolute;
            z-index: -1;
            left: -2px;
            top: -2px;
            right: -1px;
            bottom: -1px;
            transform: skew(2deg, 2deg);
            background: linear-gradient(315deg, #89ff00, #00bcd4);
        }

        .box:after {
            content: "";
            position: absolute;
            z-index: 1;
            left: 0;
            top: 0px;
            width: 50%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.01);
        }

        .box h1 {
            color: #fff;
        }
    </style>
    <div class="box">
        <h1>xxx</h1>
    </div>
    </body>

</html>