我想僅使用CSS制作一個類似這樣的按鈕，而不使用其他元素。按鈕圖片由于按鈕帶有border附件，因此我認為通常都需要:before和:after元素，以便僅在一側創建一個箭頭。因此，要在每一側制作一個箭頭，我需要span在鏈接內添加另一個元素。我嘗試的第二種方法是您在下面看到的方法。但是，使用這種解決方案時，它們無法正確居中，并且箭頭的每一邊的長度都不同。有解決方案嗎？/* General Button Style */.button {  display: block;  position: relative;  background: #fff;  width: 300px;  height: 80px;  line-height: 80px;  text-align: center;  font-size: 20px;  text-decoration: none;  text-transform: uppercase;  color: #e04e5e;  margin: 40px auto;  font-family: Helvetica, Arial, sans-serif;  box-sizing: border-box;}/* Button Border Style */.button.border {  border: 4px solid #e04e5e;}.button.border:hover {  background: #e04e5e;  color: #fff;}/* Button Ribbon-Outset Border Style */.button.ribbon-outset.border:after,.button.ribbon-outset.border:before {  top: 50%;  content: " ";  height: 43px;  width: 43px;  position: absolute;  pointer-events: none;  background: #fff;}.button.ribbon-outset.border:after {  left: -3px;  margin-top: -40px;  transform-origin: 0 0;  box-sizing: border-box;  border-bottom: 4px solid #e04e5e;  border-left: 4px solid #e04e5e;  transform: rotate(57.5deg) skew(30deg);}.button.ribbon-outset.border:before {  right: -46px;  margin-top: -40px;  transform-origin: 0 0;  box-sizing: border-box;  border-top: 4px solid #e04e5e;  border-right: 4px solid #e04e5e;  transform: rotate(57.5deg) skew(30deg);}.button.ribbon-outset.border:hover:after {  background: #e04e5e}.button.ribbon-outset.border:hover:before {  background: #e04e5e}<a href="#" class="button ribbon-outset border">Click me!</a>