使用指向左边缘和圆角右边缘设置CSS按钮的样式

Question

在@LGSon的回答后，再次使用Safari屏幕截图更新：

更新

感谢您的回答，但是下面的代码没有产生正确的效果，可以清楚地看到SVG和a标签之间的分离，因为高度不同：

.divsclass {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 146 206'%3E%3Cdefs%3E%3Cstyle%3E.c1%7Bfill:%23fff;%7D.c2%7Bfill:none;stroke:%23a0310f;stroke-linecap:round;stroke-miterlimit:10;stroke-width:10px;%7D%3C/style%3E%3C/defs%3E%3Cpath d='M146 0H98.53l-1 .47-94 94a12 12 0 0 0 0 17l94 94L99 206h47z' class='c1'/%3E%3Cpath d='M113.18 28.2l-73 74.8 73 74.81' class='c2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.divsclass a {
  color: red;
  text-transform: uppercase;
  background-color: white;
  margin-left: .75em;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 75%;
}

<div style="padding: 1em; background: black">
  <div class="divsclass"><a role="button">BACK</a></div>
</div>

我正在尝试创建以下按钮，其中的文本（下例中的BACK）可以是可变长度。我正在尝试左侧的背景图像和右侧的边框半径，但它不起作用（使用:before）。有什么想法吗？

P.S。如果有帮助的话，我确实将左三角形的图像作为单独的SVG。

Answer 1

如果您使用div作为按钮而图像作为背景，您可以使用这样的CSS：

div.divsclass {
 border-radius: 15px 50px 30px 5px:
}

因此，如果您只想使用CSS，则可以在所有4个角中设置border-radius。或者如前所述编辑你的SVG。

Answer 2

这可以单独使用CSS和伪元素

来完成

a {
  position: relative;
  display: inline-block;
  padding: 2px 10px 2px 20px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}
a::before,
a::after {
  position: absolute;
  content: '';
  left: 0;
  top: 50%;
  width: 100%;
  padding-bottom: 100%;
  background: lightgray;
  transform: rotate(-45deg);
  transform-origin: left top;
  z-index: -1;
}
a::after {
  left: 5px;
  border: 1px solid black;
}

<a href="#">BACK</a>

更新

这是使用现有SVG和伪

的版本

span {
  display: inline-block;
  background-color: black;
  padding: 2px 10px 2px 20px;
}
a {
  position: relative;
  display: block;
  color: red;
  padding: 2px 10px 2px 0;
  text-transform: uppercase;
  background-color: white;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 75%;
}

a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -14px;
  height: 100%;
  width: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 146 206'%3E%3Cdefs%3E%3Cstyle%3E.c1%7Bfill:%23fff;%7D.c2%7Bfill:none;stroke:%23a0310f;stroke-linecap:round;stroke-miterlimit:10;stroke-width:10px;%7D%3C/style%3E%3C/defs%3E%3Cpath d='M146 0H98.53l-1 .47-94 94a12 12 0 0 0 0 17l94 94L99 206h47z' class='c1'/%3E%3Cpath d='M113.18 28.2l-73 74.8 73 74.81' class='c2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

<span><a role="button">BACK</a></span>