如何使用剪輯路徑使按鈕的邊緣變圓？
.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;了，但效果不好。
uj5u.com熱心網友回復：
如果您希望所有邊緣都變圓，您可以使用偽元素而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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/492765.html
標籤：javascript html css 按钮 剪辑路径
上一篇：獨立行按鈕墊表
下一篇：帶有條件查詢的嵌套分組依據