Html 我们如何使用CSS制作这个形状

我们如何使用CSS制作这个形状

我可以使用CSS编写下面的代码，但生成的形状输出有点不正确。我们可以用CSS来做吗

.btn箭头{
宽度：15px；
高度：24px；
边框：2倍纯红；
边框右上角半径：40px；
边框右下半径：40px；
左边框：0；
显示：内联块；
位置：相对位置；
}
.btn箭头：之后，
.btn箭头：之前{
右：100%；
最高：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
}
.btn箭头：之后{
右边框颜色：白色；
边框宽度：12px；
边缘顶部：-12px；
}
.btn箭头：之前{
右边框颜色：红色；
边框宽度：14px；
利润上限：-14px；
}
身体{
填充：20px；
}

---

将CSS调整为如下所示

.btn-arrow {
      width: 30px;
    height: 30px;
    border: 2px solid red;
    border-radius: 100%;
    border-left: 0;
    display: inline-block;
    position: relative;
}

.btn-arrow:after,
.btn-arrow:before {
  right: calc(100% - 6px);
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.btn-arrow:after {
  border-right-color: white;
  border-width: 12px;
  margin-top: -12px;
}

.btn-arrow:before {
  border-right-color: red;
  border-width: 14px;
  margin-top: -14px;
}

body {
  padding: 20px;
}

---

使用CSS，您可以实现这一点

只需创建

：：在
之后和
之前的伪元素，主框旋转45度。您可以调整
线性渐变部分的度数，而不是“向右”句子

这个技巧是必要的，因为
边框图像
和
边框半径
不能同时存在于同一元素上

您可以看到有关此的更多信息：






.shape{
位置：相对位置；
宽度：100px；
边界半径：100%100%100%0；
高度：100px；
变换：旋转（45度）；
保证金：0自动；
背景：白色；
背景剪辑：填充框；
}
.形状：：之后{
位置：绝对位置；
顶部：-8px；
底部：-8px；
左：-8px；
右：-8px；
背景：线性梯度（向右，#fe3870，#fc5d3e）；
内容：''；
z指数：-1；
边界半径：100%100%100%0；
}
.形状：：之前{
位置：绝对位置；
顶部：8px；
底部：8px；
左：8px；
右：8px；
背景：白色；
内容：''；
z指数：1；
边界半径：100%100%100%0；
}
仅CSS中的许多可能解决方案之一：

此解决方案只需要一个伪元素


.btn箭头{
宽度：44px；
高度：44px；
边框右上角半径：40px；
边框左上半径：40px；
边框右下半径：40px；
背景：-webkit线性梯度（左，rgba（232,51105,1）0%，rgba（235,94,67,1）100%）；/*Chrome10-25，Safari5.1-6*/
变换：旋转（45度）；
位置：相对位置；
}
.btn箭头：：之后{
显示：块；
宽度：30px；
高度：30px；
边框右上角半径：40px；
边框左上半径：40px；
边框右下半径：40px；
背景：白色；
位置：绝对位置；
内容：''；
顶部：7px；
左：7px；
}
身体{
填充：20px；
}
使用SVG比使用HTML和CSS容易得多。形状中的圆角超过180度，因此您不能期望使用两个边界半径来实现这一点，这两个边界半径覆盖/跨越一个精确的90度截面。您必须从一个完全圆角的元素开始，然后将其部分与实际的“直角/直尺”形状重叠。。。这意味着，如果你需要它是透明的/在多色背景下工作，这几乎是马上出来。感谢大家的指导。如果你给我一些时间来构建它的话，我将使用SVGI来解决CSS。相关：我认为困难的部分不仅是形状，而且是形状的梯度。我正在使用
边框图像
属性，但似乎与边框半径不兼容，所以我实现了无背景。如果我获得了白色背景，我将继续尝试。@Temaniaf。只有
：：在
之后和
：：在
之前。我会在邮件上解释的。我理解你所做的；）但是现在你缺少了透明的部分。。。不确定OP是需要它还是需要它！工作得很有魅力。感谢您提供的解决方案，但更重要的是指出了正确的方向，而不是我想要的确切设计/形状。其他答案很有帮助，但谢谢你的时间，这太棒了。这正是我想要的，但我学到了新东西。谢谢你的回答&时间