分享一个使用svg画的切角梯形边框

最新推荐文章于 2023-01-19 20:46:47 发布

lianflower

最新推荐文章于 2023-01-19 20:46:47 发布

阅读量566

点赞数

本文链接：https://blog.csdn.net/lianflower/article/details/114535910

版权

Css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

在这里插入图片描述
有个缺点：
当容器的高度太小时，显示会有问题，例如设置.trapezoid选择器的高度为15%后，如下：

如果哪位大佬知道该怎样解决这个问题，还请赐教一下:)
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            width: 100%;
            height: 100%;
            font-size: 1vw;
        }
        body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .trapezoid {
            position: relative;
            width: 25%;
            height: 55%;
        }
        .absolute-position {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .title-box {
            width: 50%;
            height: 10.5%;
            position: relative;
        }
        .title-text {
            font-size: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;color:#65C6E7;
        }
        svg {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        #polygon1 {
            fill: transparent;
            stroke-width: 1;
            stroke: steelblue;
        }
        #polygon2 {
            stroke-width: 1;
            stroke: transparent;
        }
    </style>
</head>
<body>
<div class="trapezoid">
    <div class="absolute-position" >
        <svg viewBox="0 0 382 395" preserveaspectratio='none'>
            <polygon id="polygon1"  points='7,40 35,1 162,1 190,40 381,40 381,365 362,394 325,394 318,385 7,385 7,100 1,95 1,49, 7,40, 190,40' />
        </svg>
    </div>
    <div class="absolute-position">
        <div class="title-box">
            <svg viewBox="0 0 191 41" preserveaspectratio='none'>
                <polygon id="polygon2" points='7,40 35,1 162,1 190,40' fill="url(#gradient)" />
                <linearGradient id="gradient">
                    <stop offset="0%" stop-color="#2659c1" />
                    <stop offset="1%" stop-color="#2659c1" />
                    <stop offset="100%" stop-color="#0A2340" />
                </linearGradient>
            </svg>
            <div class="absolute-position title-text">项目时长</div>
        </div>
    </div>
</div>
</body>
</html>