css - 如何创建此按钮样式？

Question

我需要创建下图中的按钮样式(右边的那个是透明的，不是白色的)。

右下角显然是棘手的部分。这不仅仅是一个简单的斜 Angular ；它有点圆。

我想出的最佳解决方案是将 SVG 图像 mask 应用于位于按钮右侧的伪元素，并减少右侧填充以进行补偿。但这种方法有其局限性:

• 它需要一个固定高度的按钮(至少，如果我想保持 Angular 的纵横比)
• 每个按钮尺寸需要不同的 SVG
• 我不明白它如何适用于透明按钮样式

所以我希望有人可以提出不同/更好的方法!

谢谢

更新:

这是我目前的方法 - https://codepen.io/peteheaney/pen/jwVEPm

$primary: #FAB500;

*, *::after, *::before {
    font-family: sans-serif;
    box-sizing: border-box;
}

.button {    
  background-image: none;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-bottom: 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  transition: all 0.2s;

  &:active,
  &:hover,
  &:focus {
    text-decoration:none;
  }

  &--large {
    font-size: 15px;
    padding-left: 24.818px;
    height: 52px;
    line-height: 52px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    position: relative;
    margin-right: 24.818px;

    &:after {
            border-top: 2px solid $primary;
            border-bottom: 2px solid $primary;
            background: $primary;
      content: "";
      border-top-right-radius: 6px;
      position: absolute;
      left: 100%;
      bottom: -2px;
      width: 24.818px;
      height: 52px;
      mask: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-right.svg) top left / cover;
    }
  }

    &--primary {
        color: #000;
        background-color: $primary;
        border-color: $primary;

        &:active,
        &:hover,
        &:focus {
            background-color: darken($primary, 2%);
            border-color: darken($primary, 2%);
        }
    }
}

Answer 1

如果您不介意让 Angular 落保持可点击状态，您可以使按钮不可见并只使用背景图片:

button{
    width:x;
    height:y;
    border:none;
    background-color:none
    background-image:url(button_image.png);
    background-position:center;
    background-size:x y;
    background-repeat:no-repeat;
}

使用 button_image.png 是您的按钮样式的图像，没有文本。