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。