html - 顶部边框不适用于切削刃

Question

我试图制作带有切割边缘的菜单按钮，我想给它一个顶部边框，但它根本不起作用，当我给它一个边框时，它会稍微向左突出..请帮助 每个菜单按钮都有不同的颜色，我想让它成为顶部红色，但它不起作用 DEMO html

CSS

.btncol1 {
    background-color: #8cc63e;
}
.btncol2 {
    background-color: #aadcf3;
}
.btncol3 {
    background-color: #87868e;
}
.btncol4 {
    background-color: #c47269;
}
.btncol5 {
    background-color: #8cc63e;
}
.button:not(:last-child) {
    margin-left: 3px;
}
.button:before {
    content:'';
    width: 0px;
    height: 0px;
    display: block;
    border-bottom: 14px solid transparent;
    border-left: 14px solid White;
    position: relative;
    margin-left: -14px;
    margin-top: -14px;
    top: 4px;
    left: 4px;
}
.button {
    height: 55px;
    padding: 10px;
    width: 100px;
    display: inline-block;
    text-decoration: none;
    color: white;
    margin: 0;
    float: right;
    transition: all 300ms ease;
    font-size: 14px;
    font-weight: 400;
    font-family:'Open Sans', sans-serif;
    text-align: left;
}

Answer 1

border 向左侧外移一点，因为红色边框用于整个 div 并且切割边缘位于 顶部div 使用 CSS。

现在，由于您正在应用红色边框，因此您必须将 :before 伪元素的位置移动得更高一点，以使红色边框变得不可见并位于切割边缘下方。

.button {
    border-top: 1px solid red;
}

.button:before {
    content:'';
    width: 0px;
    height: 0px;
    display: block;
    border-bottom: 14px solid transparent;
    border-left: 14px solid White;
    position: relative;
    margin-left: -14px;
    margin-top: -15px; /* This was changed */
    top: 4px;
    left: 4px;
}