如何使用 CSS clip-path 在长方形中创建直角梯形？

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《如何使用 CSS clip-path 在长方形中创建直角梯形？》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

长方形中实现直接梯形，利用clip-path一招搞定

如何在长方形中实现一个直接梯形，这个问题让许多开发者伤透脑筋。不过，利用css的clip-path属性，就可以轻松解决。

clip-path属性可以让我们使用多边形（polygon）来裁剪元素的形状。在我们的例子中，我们将使用以下多边形来创建一个直接梯形：

polygon(0% 0%,30% 0px,70% 50%,100% 50%,100% 100%,0 100%)

这个多边形定义了一个从左上角开始，向右延伸30%，然后向上延伸到中心，再水平向右延伸到100%，最后向下延伸到右下角的形状。

html部分

<div class="container">
    <div class="status">空閒</div>
    <div class="number">3<span>台</span></div>
</div>

css部分

.container {
    width: 600px;
    height: 300px;
    background-color: #FFD900;
    border-radius: 20px;
    position: relative;
}
.container .status {
    text-align: right;
    color: #fff;
    margin: 50px 50px 0;
    font-size: 40px;
    font-weight: 700;
}
.container .number {
    width: 580px;
    height:280px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #fff;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    font-weight: 700;
    font-size: 40px;
    padding-left: 50px;
    padding-bottom: 50px;
    box-sizing: border-box;
    clip-path: polygon(0% 0%,30% 0px,70% 50%,100% 50%,100% 100%,0 100%);
}
.container .number span {
    color: #ddd;
    margin-left: 30px;
}

通过将这些代码应用到html元素上，我们就可以在长方形中创建一个直接梯形。

理论要掌握，实操不能落！以上关于《如何使用 CSS clip-path 在长方形中创建直角梯形？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！