Question

我目前正在建立一个网站，要求按钮在按钮的左侧倾斜。该网站响应迅速，按钮也需要圆角。我也试图避免使用背景图像。

有人能告诉我这个解决方案吗？忽略按钮上的图标，我能够做到这一点。我只需要倾斜的一面。

body {
  background: lightblue;
  font-family: sans-serif;
}
div {
  background: purple;
  width: 200px;
  padding: 30px;
  border: 3px solid white;
  color: white;
}

<div>Some Text</div>

Answer 1

是您可以使用 css-pseudo元素 before或after这样使用白色叠加层

.slantButton {
  position: relative;
  background-color: #8D3F81;
  border: 1px solid transparent;
  border-radius: 5px 5px 5px 20px;
  color: #fff;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 18px;
  cursor: pointer;
  outline: 0;
}
.slantButton:before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  width: 0;
  height: 0;
  border-bottom: 42px solid #fff;
  border-right: 16px solid transparent;
}

<button class="slantButton">Call Me Back</button>

释

我已使用

将不同的边框半径应用到左下角

border-radius：5px 5px 5px 20px;

然后在伪元素中使用 css triangle 。制作一个三角形的白色叠加，并按照你的建议做出倾斜的边缘

    .slantButton {
      position: relative;
      background-color: #8D3F81;
      border: 1px solid transparent;
      border-radius: 5px 5px 5px 20px;
      color: #fff;
      padding: 10px 20px;
      text-transform: uppercase;
      font-size: 18px;
      cursor: pointer;
      outline: 0;
    }
    .slantButton:before {
      content: '';
      position: absolute;
      top: 0;
      left: -5px;
      width: 0;
      height: 0;
      border-bottom: 42px solid rgba(0,0,0,0.5);
      border-right: 16px solid transparent;
    }

<button class="slantButton">Call Me Back</button>

Answer 2

注意：我正在添加一个单独的答案，因为虽然我在评论中链接的答案似乎给出了一个解决方案，但由于边界的存在，这一点也有点复杂边界半径。

可以使用以下部分创建形状：

一个相对定位的主要容器元件。
两个伪元素，大约是父元素宽度的一半。一个元素倾斜产生倾斜的左侧而另一个元素没有倾斜。
偏斜的伪元素位于左侧，而普通元素位于容器元素的右侧。
偏斜的伪元素只有顶部，左边和底部边框。省略右边框，因为它将位于形状的中间。对于未倾斜的伪元素，出于同样的原因避免使用左边框。
偏斜伪元素的左边界比其他边框稍厚，因为偏斜会使边框看起来比实际更薄。

我还在片段中添加了hover效果，以展示形状的响应特性。

＆＃13;

.outer {
  position: relative;
  height: 75px;
  width: 300px;
  text-align: center;
  line-height: 75px;
  color: white;
  text-transform: uppercase;
}
.outer:before,
.outer:after {
  position: absolute;
  content: '';
  top: 0px;
  height: 100%;
  width: 55%;
  background: purple;
  border: 2px solid white;
  border-left-width: 3px;
  z-index: -1;
}
.outer:before {
  left: 0px;
  border-radius: 20px;
  border-right: none;
  transform: skew(20deg);
  transform-origin: top left;
}
.outer:after {
  right: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-left: none;
}

/* Just for demo of responsive nature */

.outer{
  transition: all 1s;
}
.outer:hover{
  height: 100px;
  width: 400px;
  line-height: 100px;
}
body{
  background: lightblue;
}

＆＃13;

<div class='outer'>
  Call me back
</div>

＆＃13;

<强>优势：

这种方法的一大优点是它提供了优雅的后备。也就是说，在非CSS3兼容的浏览器中，它看起来像带有圆角的普通按钮（并且没有倾斜的边）。
页面（或容器元素）背景不必是纯色。
形状本身可以具有非纯色（即图像或渐变）作为背景。它需要一些额外的调整，但方法本身将保持不变。

在下面的代码片段中，我为每个组件指定了不同的颜色，以便直观地说明如何实现形状：

＆＃13;

.outer {
  position: relative;
  height: 75px;
  width: 300px;
  text-align: center;
  line-height: 75px;
  color: white;
  text-transform: uppercase;
}
.outer:before,
.outer:after {
  position: absolute;
  content: '';
  top: 0px;
  height: 100%;
  width: 55%;
  background: purple;
  border: 2px solid white;
  border-left-width: 3px;
  z-index: -1;
}
.outer:before {
  left: 0px;
  border-radius: 20px;
  border-right: none;
  transform: skew(20deg);
  transform-origin: top left;
  background: seagreen;
  border-color: red;
}
.outer:after {
  right: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-left: none;
  background: yellowgreen;
  border-color: maroon;
}

/* Just for demo of responsive nature */

.outer{
  transition: all 1s;
}
.outer:hover{
  height: 100px;
  width: 400px;
  line-height: 100px;
}
body{
  background: lightblue;
}

＆＃13;

<div class='outer'>
  Call me back
</div>

＆＃13;

Answer 3

这也可以使用CSS border-radius＆＃39;通过设置多个值。

它的曲率比示例图像略高，但它更清晰，并且不需要额外的元素或伪元素。

＆＃13;

body {
  background: lightblue;
  font-family: sans-serif;
}
div {
  background: purple;
  width: 200px;
  padding: 30px;
  border: 3px solid white;
  border-radius: 15px;
  border-bottom-left-radius: 50px 150px;
  color: white;
}

＆＃13;

<div>Some Text</div>

＆＃13;

div倾斜的侧面和圆角

3 个答案:

释