我有这段代码：
.multiply-button {
display: table;
background: rgba(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>
我需要在这个“箭头”按钮上设置边框.我可以很容易地边界矩形部分(我已经做过了),但如何在三角形部分制作这个边框？
解决方法
以下应该做你需要的
.multiply-button {
display: table;
background: rgba(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);
border-left-color: #008000;
margin-left: -1px;
}
.multiply-button-content:before {
border-color: rgba(0,0);
border-left-color: #000000;
}
<button id="multiply-button" class="multiply-button"> <div class="multiply-button-content">Multiply</div> </button>
