如何使一个圆形按钮的边缘与剪贴路径?

Question

如何使用clip-path使按钮的边缘圆形?

.skew{
border: none;
background: none;
outline: none;
color: #fff;
padding: 1rem 1.5rem;
background-color: #ee128f;
clip-path: polygon(0 0, 100% 0%, calc(100% - 22px) 100%, 0% 100%);
margin: 1rem;
border-radius: 5px;
padding-right:3rem ; 
/* border-bottom-right-radius: 5px; */
}

<button class="skew">text</button>

我试过border-bottom-right-radius: 5px;，但它不起作用。

Answer 1

如果你想要所有的边缘都圆润，你可以使用伪元素和transform: skew来代替clip-path。

.skew{
position: relative;
border: none;
background: none;
outline: none;
color: #fff;
padding: 1rem 1.5rem;
background-color: #ee128f;
margin: 1rem;
border-radius: 5px;
padding-right:3rem ; 
}
.skew:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #ee128f;
border-radius: 5px;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}

<button class="skew">text</button>