div 斜边和圆角

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-伪元素before or 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 2

这也可以通过设置多个值使用 CSS border-radius'。

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

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>

Answer 3

Note: I am adding a separate answer because though the answers that I linked in comment seem to give a solution, this one is a bit more complex due to the presence of border also along with the 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>

div 斜边和圆角

div with slanted side and rounder corners

html

css

button

css-shapes

说明