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

Posted 2023-03-06

【中文标题】我们如何使用 CSS 制作这个形状

【英文标题】：How can we make this shape using CSS

【发布时间】：2018-09-21 04:50:53

【问题描述】：

？

我可以使用 CSS 编写以下代码，但生成的形状输出有点偏离。我们可以使用 CSS 做到这一点吗？

.btn-arrow 
  width: 15px;
  height: 24px;
  border: 2px solid red;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  border-left: 0;
  display: inline-block;
  position: relative;


.btn-arrow:after,
.btn-arrow:before 
  right: 100%;
  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;

<div class="btn-arrow"></div>

【问题讨论】：

使用 SVG 而不是 html 和 CSS 会更容易

你的形状的圆角持续超过 180 度，所以你不能指望用两个边界半径来实现，每个边界半径都覆盖/跨越一个精确的 90 度部分。您必须从一个完全圆形的元素开始，然后将它的一部分与实际的“直角/直边”形状重叠......这意味着，如果您需要它是透明的/在多色背景上工作，这个马上就出来了。

谢谢大家的指导。我会选择 SVG

我有一个 CSS 解决方案，如果你给我一些时间来构建它。

相关：***.com/questions/30711203/…

【参考方案1】：

使用 CSS，您可以实现这一目标。

只需创建::after 和::before 伪元素，主框旋转45 度。您可以调整linear-gradient 部分的度数，而不是“向右”语句。

这个技巧是必要的，因为border-image 和border-radius 不能同时存在于同一个元素上。

你可以看到更多关于这个：

Possible to use border-radius together with a border-image which has a gradient? https://css-tricks.com/examples/GradientBorder/

.shape 
  position:relative;
  width: 100px;
  border-radius: 100% 100% 100% 0;
  height: 100px;
  transform: rotate(45deg);
  margin: 0 auto;
  background: white;
  background-clip: padding-box;

.shape::after 
    position: absolute;
    top: -8px; 
    bottom: -8px;
    left: -8px; 
    right: -8px;
    background: linear-gradient(to right, #fe3870, #fc5d3e);
    content: '';
    z-index: -1;
    border-radius: 100% 100% 100% 0;

.shape::before 
    position: absolute;
    top: 8px; 
    bottom: 8px;
    left: 8px; 
    right: 8px;
    background: white;
    content: '';
    z-index: 1;
    border-radius: 100% 100% 100% 0;

<div class="shape">
</div>

【讨论】：

我认为困难的不仅仅是形状，而是形状的渐变

我正在使用border-image属性，但似乎与边框半径不兼容，所以我在没有背景的情况下实现了。我会继续尝试。

@TemaniAfif 我实现了白色背景。只需 ::after 和 ::before。我会在帖子中解释。

我明白你做了什么 ;) 但现在你错过了透明部分......不确定 OP 是否需要它

太棒了！像魅力一样工作。感谢您的解决方案，但更重要的是指出了正确的方向

【参考方案2】：

CSS 中的许多可能解决方案之一：

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

.btn-arrow 
  width: 44px;
  height: 44px;
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background: -webkit-linear-gradient(left, rgba(232,51,105,1) 0%,rgba(235,94,67,1) 100%); /* Chrome10-25,Safari5.1-6 */
  transform:rotate(45deg);
  position: relative;


.btn-arrow::after 
  display: block;
  width: 30px;
  height: 30px;
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background: white;
  position: absolute;
  content: '';
  top: 7px;
  left: 7px;


body 
  padding: 20px;

<div class="btn-arrow"></div>

【讨论】：

这太棒了。这正是我想要的，但我学到了这个新东西。感谢您的回答和时间

【参考方案3】：

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

【讨论】：

不是我想要的确切设计/形状。其他答案有所帮助，但感谢您的时间