Question

一个CSS按钮与Safari浏览器的截图再次更新：

更新：

谢谢您的回答，但以下代码不会产生正确的效果，人们可以清楚地看到SVG与标签之间因高度差异而分开：

.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

这可以结合单独使用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>

Answer 2

如果使用DIV作为一个按钮和图像作为背景，你可以让你的CSS是这样的：

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

所以，你可以设置边框半径在所有的4个角落，如果你只想用CSS。或者如前所述编辑你的SVG。