当然不是完美的，但也不算太糟...

.btn {
  border-radius: 2px;
  background-image: -moz-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  color: rgb(64, 64, 64);
  text-align: center;
  height: 25px;
  border: 1px solid #d9d9d9;
  vertical-align: middle;
  font-family: "Segoe UI";
  box-shadow: 0px 0px 1px #d9d9d9;
    position: relative;
}

.btn span {
    position: relative;
    z-index: 1;
}

.btn:after {
    content: "";
    width: 16px;
    height: 16px;
    background-image: -moz-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
    background-image: -webkit-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
    background-image: -ms-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
    display: block;
    position: absolute;
    top: 3px;
    right: -9px;
    border: 1px solid #d9d9d9;
    border-left: none;
    border-bottom: none;
    border-radius: 2px;
    -webkit-transform: rotate(47deg) skew(5deg);
    -moz-transform: rotate(47deg) skew(5deg);
    transform: rotate(47deg) skew(5deg);
}

<button class="btn"><span>Some button</span></button>

.btn {
    position: relative;
    background: #c2e1f5;
    border: 10px solid #c2e1f5;
}
.btn:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.btn:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #c2e1f5;
    border-width: 36px;
    margin-top: -36px;
}

您可以将按钮 Package 在一个按钮中，然后使用位置作为 Package 器的相对位置，然后添加：before，您可以向：before添加边框，并使宽度和高度为0。
这很难解释，它的更好，如果你检查这个博客：https://developerwings.com/button-with-a-sideways-triangle-using-css-html/