带有一侧边缘的按钮

Question

带有一侧切角而非半径的按钮

我正在尝试使用半径，但它的曲线形状——使用border属性或任何其他CSS属性，尝试不使用绝对定位在此处输入图像描述

Answer 1

您可以从以下中获得一些想法

HTML

<div class="button">Buy Now</div>

CSS

.button {
/* outline: solid 1px green; */
width: 150px;
height: 70px;
overflow: hidden;
position: relative;
margin: 1em;
color: #fff;
}
.button::before {
content: ' ';
display: block;
background: #d33;
width: 200px;
height: 200px;
transform: rotate(45deg);
position: relative;
top: -100px;
right: 50px;
}