div倾斜的侧面和圆角

Question

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

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

示例jsfiddle

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元素 使用白色叠加

.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三角形.制作一个三角形的白色覆盖层,并按照您的建议制作倾斜边缘

    .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

注意：我要添加一个单独的答案，因为尽管我在评论中链接的答案似乎可以提供解决方案，但是由于存在border以及border-radius，因此此答案要复杂一些。

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

• 一个相对放置的主容器元件。
• 两个伪元素，它们大约是父元素宽度的一半。倾斜一个元素以产生倾斜的左侧，而另一个不倾斜。
• 倾斜的伪元素位于容器元素的左侧，而普通元素位于容器元素的右侧。
• 倾斜的伪元素只有顶部，左侧和底部边界。右边框被省略，因为它将恰好位于形状的中间。对于不倾斜的伪元素，由于相同的原因，避免使用左边框。
• 倾斜的伪元素的左边界比其他边界要粗一些，因为倾斜会使边界看起来比实际的更细。

我还向hover片段添加了一种效果，以演示形状的响应特性。

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

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

优点：

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

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

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

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