不更改HTML代码的情况下将按钮向一侧倾斜

Question

如何使按钮倾斜但不改变HTML？

我想使用Bootstrap按钮的代码。

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

它应该看起来像这张图片：

按钮示例

非常感谢您的帮助。

- wsd

---

这可能会有所帮助：https://dev59.com/OoPba4cB1Zd3GeqPw8hj - m2j

https://dev59.com/22Ij5IYBdhLWcg3w6JHU - m2j

https://codepen.io/o/pen/wosfH - m2j

Answer 1

你可以通过给按钮添加一个仅由绝对定位的CSS三角形（略微旋转）构成的::after 伪元素来实现这一点：

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>

- Rounin

---

非常感谢。还有其他解决方案吗？因为如果我在其他背景上有更多的按钮，我就必须用背景颜色来设计每个三角形... - wsd

我不明白你所说的“另一个解决方案”的意思。请你能进一步解释吗？谢谢。 - Rounin

没有三角形... 有使用 transform: skew() 的解决方案吗？ - wsd

是的，还有另一种类似的方法，使用另一个::after 伪元素。请参阅上面的帖子，了解使用transform: skewX（）和background-color: inherit 的第二种方法。 - Rounin

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>

- Veiko Jääger

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中。

您可以在此处查看其工作的Codepen：http://codepen.io/tinacious/pen/dOdOOw

- Tina