如何利用 CSS3 在矩形中裁剪直角梯形？

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《如何利用 CSS3 在矩形中裁剪直角梯形？》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

裁剪出长方形中的小直角梯形

想在给定的长方形div中实现一个直角梯形？以下方法将帮你轻松解决这个问题：

利用css3中的clip-path属性和polygon函数，我们可以裁剪出任意形状的区域。

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;
}

polyon后面的百分比表示梯形的形状和大小：0% 0%表示起始点在左上角，后面的数字表示梯形的上边、两侧以及底边的百分比值。通过调整这些值，可以改变梯形的形状。

完成以上步骤后，你就可以在长方形div中呈现一个干净利落的直角梯形了。

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