css - 带边框的梯形标签

Question

所以，我制作了这个梯形标签。但是当我想选择它并将颜色设置为白色和蓝色边框时，它会不断切割我的侧边框。我知道这是因为 clip-path: polygon(1% 0, 99% 0, 100% 100%, 0% 100%); 我在 css 类中放入了那个形状.

我的问题是，是否有任何其他方法可以切割边或获得类似的梯形效果，但要选择白色标签并在所有边上显示可见边框？

Answer 1

你可以这样做:

CSS:

#trapezoid {
    border-bottom: 100px solid blue;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    height: 0;
    width: 200px;
}

HTML:

<div id="trapezoid"></div>

你可以玩玩它here