html - 带有斜边和圆 Angular 的 div

Question

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

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

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

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.

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

• 相对定位的一个主要容器元素。
• 两个伪元素，宽度大约是父元素的一半。一个元素倾斜以产生倾斜的左侧，而另一个元素不倾斜。
• 倾斜的伪元素位于左侧，而正常元素位于容器元素的右侧。
• 倾斜的伪元素只有上、左、下边框。右边框被省略，因为它会出现在形状的中间。对于没有倾斜的伪元素，同样的道理，左边框也被避免了。
• 倾斜伪元素的左边框比其他边框稍粗，因为倾斜使边框看起来比实际更细。

我还在代码片段中添加了一个悬停效果来展示形状的响应特性。

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

---

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

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