偏向一个按钮一侧更改HTML

Question

我如何在一侧符合一个按钮而不更改html我想像bootstrap按钮一样使用代码

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

应该看起来像这张照片：

按钮示例

非常感谢您的帮助

Answer 1

您可以通过将::after伪元素添加到仅由绝对定位的CSS三角形（略微旋转）来实现：

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>

Answer 2

不幸的是，对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>

Answer 3

您可以使用伪元素:after，并且比CSS剪辑路径更大。

您的HTML看起来像这样，您只需将btn-clipped类添加到您希望具有剪裁样式的按钮：

：

<button class="btn btn-default btn-clipped">
  Clipped button
</button>

您将为.btn-clipped添加样式：

.btn-clipped {
  border-radius: 0;
  position: relative;
  overflow: hidden;
  text-align: left;
  padding-right: 25px; /* adjust this to your liking */
  width: 200px; /* you can also set a width if you like (optional) */
}
.btn-clipped:after {
  background-color: white;
  width: 30px;
  height: 120%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -20px;
  transform: rotate(10deg); /* adjust this to tweak the angle */
}

另外，如果您知道应在全球应用该样式，则可以将剪辑样式添加到.btn或.btn-default。

您可以在此处看到它的作用：http：//codepen.io/tinacious/pen/dodoow