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，并且使用CSS将切边位于div的顶部。

现在，由于您正在应用红色边框，因此必须将: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;
}

顶部边框不适用于切边

1 个答案: