如何用css生成只有一侧会倾斜的按钮形状

Question

我正在尝试设计一个带有长方体阴影的单侧倾斜按钮-https://prnt.sc/10nawxl.有人能帮我解决这个问题吗？

Answer 1

我认为它可以帮助你
我发现我们不能同时使用clip-path和box-shadow
所以我改为使用drop-shadow。

button {
background-color: yellow;
color: black;
font-weight: bold;
padding: 10px;
font-size: 20px;
clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0 100%);
border: none;
outline: none;
border-radius: 17px 5px 5px 5px;
}
button:hover {
cursor: pointer;
}
.button-container {
filter: drop-shadow(0 0 6px black);
}

<div class="button-container"><button>Click me</button></div>