如何为css中的按钮做部分边框？ [复制]

Question

我想在 css 中构建这个按钮：

我们建议我使用 ::after，我成功地完成了这个按钮的一部分。但是只有一行，我不能在同一个组件上使用 manybalises ::after。我该怎么办？

这是我的 CSS：

.special_button{
    position: relative;
    background-color: white;
    height: 60px;
    font-size: 32px;
    width: 192px;
    font-family: dosis_light;
}

.special_button::after{
    position: absolute;
    content: '';
    width: 33px;
    height: 2px;
    background: black;
    margin-top: 48px;
    margin-left: 20px;
}

我的结果：

Answer 1

也可以使用:before，但不是创建单行，而是使用每个元素创建角。

.special_button{
    position: relative;
    background-color: white;
    height: 60px;
    line-height:60px;
    font-size: 32px;
    font-family: dosis_light;
    border:none;
    padding:0 15px;
}

.special_button::before,
.special_button::after{
    position: absolute;
    content: '';
    width: 33px;
    height: 20px;
}

.special_button::before{
    left:0;
    top:0;
    border-left:3px solid black;
    border-top:3px solid black;
}
.special_button::after{
    right:0;
    bottom:0;
    border-right:3px solid black;
    border-bottom:3px solid black;
}

<button class="special_button">ME CONTACTER</button>