html - 在不更改 HTML 的情况下向一侧倾斜按钮

Question

如何在不更改 HTML 的情况下将按钮倾斜到一侧我想像使用 Bootstrap 按钮一样使用代码

<a class="btn btn-default" href="">BUTTON</a>

它应该看起来像这张图:

Button example

非常感谢您的帮助

Answer 1

您可以通过向您的按钮添加一个 ::after 伪元素来实现这一点，该伪元素仅包含一个绝对定位的 CSS 三 Angular 形(稍微旋转):

button {
display: block;
position: relative;
width: 200px;
height: 60px;
margin-bottom: 12px;
color: rgb(255,255,255);
font-size: 32px;
line-height: 48px;
text-align: left;
background-color: rgb(51,204,51);
border: none;
}

button:nth-of-type(2) {
width: 140px;
}

button:nth-of-type(1)::after {
content: '';
display: block;
position: absolute;
top: -60px;
right: -60px;
width: 0;
height: 0;
border: 60px solid transparent;
border-bottom-color: rgb(255,255,255);
transform: rotate(-20deg);
}

button:nth-of-type(2)::after {
content: '';
display: block;
position: absolute;
top: 0;
right: -30px;
width: 60px;
height: 60px;
background-color: inherit;
transform: skewX(-25deg);
}

<button type="button">Button</button>
<button type="button">Button</button>