带有斜边和圆角的 div

Question

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

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

Sample 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

注意：我要添加一个单独的答案，因为虽然我在评论中链接的答案似乎给出了解决方案，但由于边框的存在以及边界半径。

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

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

我还在 sn-p 中添加了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 的浏览器中，它看起来像带有圆角（并且没有斜边）的普通按钮。
• 页面（或容器元素）背景不必是纯色。
• 形状本身可以使用非纯色（即图像或渐变）作为背景。它需要一些额外的调整，但方法本身将保持不变。

---

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

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

Answer 2

是的，您可以像这样使用 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>

说明

我已将 不同的边框半径应用到左下角，使用

边框半径：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 3

这也可以通过设置多个值来使用 CSS 边框半径。

这确实比您的示例图像有更多的曲率，但它更干净，不需要额外的元素或伪元素。

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

<div>Some Text</div>