渐变色border & clippath梯形

最新推荐文章于 2024-05-04 20:22:09 发布

良纵

最新推荐文章于 2024-05-04 20:22:09 发布

阅读量357

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_33807889/article/details/127298330

版权

代码提示

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=SmartBtmBtnTitle, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #000;
        }
        .con {
            margin: 100px;
            width: 500px;
            height: 36px;
            border: 1px solid;
            border-image: linear-gradient(to right, #f6b73c, #4d9f0c) 1;
        }

        .wrap {
            margin: 100px;
            display: inline-block;
        }
        .clip-path {
            width: 500px;
            height: 100px;
            background-image: linear-gradient(to right, #f6b73c, #4d9f0c);
            clip-path:polygon(0 0, 0 calc(100% - 15px), 15px 100%,100% 100%, 100% 0);
            border-bottom: 5px solid; 
            border-image: linear-gradient(to right, #ff000088, #0000ff88) 1;
            position: relative;
        }

        .line {
            width: 21.15px;
            height: 5px;
            background: #ff000088;
            position: absolute;
            bottom: 10px;
            left: 0;
            transform-origin: 0% 0%;
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <div class="con"></div>
    <div class="wrap">
        <div class="clip-path">
            <div class="line"></div>
        </div>
    </div>

</body>

</html>

.con {
            margin: 100px;
            width: 500px;
            height: 36px;
            border: 1px solid;
            border-image: linear-gradient(to right, #f6b73c, #4d9f0c) 1;
}


    <div class="con"></div>