html – CSS：在纯CSS箭头上创建边框

我有这段代码：

.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>

This is a useful tool

原文地址：https://www.jb51.cc/html/231917.html