CSS：请在纯CSS边框箭头

Question

我有这样的代码片段：

.multiply-button { 
 
    display: table; 
 
    background: rgba(0, 0, 0, 0); 
 
    border: none; 
 
    color: white; 
 
    padding: 0; 
 
} 
 
.multiply-button-content { 
 
    display: table-cell; 
 
    background: green; 
 
    padding: 10px 9px; 
 
    border: solid 1px black; 
 
    border-right: none !important; 
 
} 
 
.multiply-button-arrow { 
 
    display: table-cell; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 20px 0 20px 12px; 
 
    border-color: transparent transparent transparent green; 
 
}

<button id="multiply-button" class="multiply-button"> 
 
    <div class="multiply-button-content">Multiply</div> 
 
    <div class="multiply-button-arrow"></div> 
 
</button>

我需要对这个 “箭头” 按钮边框。我可以轻松地边框矩形部分（我已经做到了），但是如何在三角形部分上制作此边框？

Answer 1

下应该做什么，你需要

.multiply-button { 
 
    display: table; 
 
    background: rgba(0, 0, 0, 0); 
 
    border: none; 
 
    color: white; 
 
    padding: 0; 
 
} 
 
.multiply-button-content { 
 
    display: table-cell; 
 
    background: green; 
 
    padding: 0 9px; 
 
    border: solid 1px black; 
 
    border-right: none !important; 
 
    position: relative; 
 
    vertical-align:middle; 
 
    height: 40px; /* double the border width */ 
 
    box-sizing: border-box; 
 
} 
 
.multiply-button-content:after, 
 
.multiply-button-content:before { 
 
    left: 100%; 
 
    top: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    border-width: 20px 0 20px 12px; 
 
    margin-top: -20px; 
 
} 
 
.multiply-button-content:after { 
 
    border-color: rgba(0, 128, 0, 0); 
 
    border-left-color: #008000; 
 
    margin-left: -1px; 
 
} 
 
.multiply-button-content:before { 
 
    border-color: rgba(0, 0, 0, 0); 
 
    border-left-color: #000000; 
 
}

<button id="multiply-button" class="multiply-button"> 
 
    <div class="multiply-button-content">Multiply</div> 
 
</button>

This is a useful tool

Answer 2

因为只需要一个伪元素，使“点”，你可以用其他的使它后面的一个边框（使其尺寸略大）。

例如;

div { 
 
    height: 30px; 
 
    border: 2px solid black; 
 
    display: inline-block; 
 
    border-right: 2px solid transparent; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    position: relative; 
 
    background: tomato; 
 
    color: white; 
 
} 
 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border: 17px solid transparent; 
 
    border-left: 17px solid black; 
 
    right: -35px; 
 
    top: -2px; 
 
    z-index: 6; 
 
} 
 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border: 15px solid transparent; 
 
    border-left: 15px solid tomato; 
 
    right: -31px; 
 
    top: 0; 
 
    z-index: 8; 
 
}

<div>Arrow, Please!</div>

Answer 3

可以实现与:before或:after伪选择。研究并调整下面的例子。

.multiply-button { 
 
    display: inline; 
 
    background: rgba(0, 0, 0, 0); 
 
    border: none; 
 
    color: white; 
 
    padding: 0; 
 
    position: realtive; 
 
} 
 
.multiply-button-content { 
 
    display: table-cell; 
 
    background: green; 
 
    padding: 10px 9px; 
 
    border: solid 1px black; 
 
    border-right: none !important; 
 
    width: 100px; 
 
    position: relative; 
 
} 
 
.multiply-button-arrow { 
 
    width: 0; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 20px 0 20px 12px; 
 
    border-color: transparent transparent transparent black; 
 
    position: absolute; 
 
    top: -2px; 
 
    right:-12px; 
 
} 
 

 
.multiply-button-arrow:before { 
 
    border-style: solid; 
 
    border-width: 20px 0 20px 12px; 
 
    border-color: transparent transparent transparent green; 
 
    position: absolute; 
 
    right: 1px; 
 
    top: -20px; 
 
    content: ""; 
 
}

<button id="multiply-button" class="multiply-button"> 
 
    <div class="multiply-button-content"> 
 
    
 
    <div class="multiply-button-arrow"></div> 
 
    Multiply</div> 
 
    
 
</button>

Answer 4

或者多simplier：

只有一个伪元素

.multiply-button { 
 
     background: rgba(0, 0, 0, 0); 
 
     border: none; 
 
     width: 100px; 
 
     color: #FFF; 
 
     padding: 0; 
 
     overflow: hidden; 
 
    } 
 

 
    .multiply-button-content { 
 
     display: block; 
 
     position: relative; 
 
     background: #008000; 
 
     width: 60px; 
 
     padding: 10px 9px; 
 
     border: solid 1px #000; 
 
     border-right: none !important; 
 
    } 
 

 
    .multiply-button-content:before { 
 
     content: ""; 
 
     position: absolute; 
 
     width: 36px; 
 
     height: 31px; 
 
     z-index: -1; 
 
     top: 0; 
 
     right: -13px; 
 
     border: 1px solid #000; 
 
     background: #008000; 
 
     transform: rotate(45deg); 
 
    }

<button id="multiply-button" class="multiply-button"> 
 
     <div class="multiply-button-content">Multiply</div> 
 
    </button>

Answer 5

div{ 
 
    position: relative; 
 
    background-color: #008000; 
 
    padding: 0px 16px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    display: inline-block; 
 
    color: white; 
 
    border: 2px solid black; 
 
    border-right: none; 
 
    z-index:1; 
 
} 
 

 
div:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 100%; 
 
    z-index:-1; 
 
    width: 28px; 
 
    height: 28px; 
 
    background-color: #008000; 
 
    border-right: 2px solid black; 
 
    border-bottom: 2px solid black; 
 
    transform: rotate(-45deg) translate(-14px,-7px); 
 
}

<div>Multiply</div>

的CSS