Question

如何在一侧扭曲按钮但不更改HTML 我想像使用Bootstrap按钮一样使用代码

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

它应该如下图所示：

Button example

非常感谢您的帮助

Answer 1

您可以通过向按钮添加::after伪元素来实现此目的，该伪元素仅包含绝对定位的CSS三角形（稍微旋转）：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

不幸的是不是wide browser support for clip-path ，而是简单而漂亮：

.btn {
  color: white;
  display: inline-block;
  padding: 10px 20px 10px 10px;
  text-decoration: none;
  -webkit-clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.btn-default {
  background-color: green;
}
.btn-blue {
  background-color: blue;
}
.btn-red {
  background-color: red;
}

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

改变HTML，一边按一下按钮

2 个答案: