创建一个圆角箭头。

Question

创建一个圆角箭头。

11

我正在尝试制作一个看起来像这样的箭头：

然而，这是我能够接近它的最佳效果：

.button {
  margin: 4em 0;
  padding: 2em;
  width: 15%;
  margin: 0 auto;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  webkit-justify-content: center;
  justify-content: center;
}
.curved-arrow {
  display: inline-block;
  border-top: 10px solid #fff;
  border-bottom: 10px solid #fff;
  border-left: 30px solid #fff;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
}

<div class="button">
  <div class="curved-arrow"></div>
</div>

这真的有可能吗？我知道我可以使用图片，但我的设计师为整个网站制作了多个颜色的此类形状，我宁愿使用CSS来实现。

如果难以理解，它是一条从顶部到底部的平直线，在右侧向中间弯曲。

- Ishio

我不知道如何做，但根据这个页面 https://pattle.github.io/simpsons-in-css/ ，我认为是可能的。 - Andrea Casaccia

我一直在搜索，但目前还没有找到任何东西，但感谢您用这些复杂而令人印象深刻的样式给了我希望！ - Ishio

2

你可以考虑使用Web字体或SVG。 - Robert McKee

@RobertMcKee 谢谢，我没有考虑过那个，我会去了解一下！ - Ishio

1

http://codepen.io/anon/pen/GpezyR - Robert McKee

5个回答

7

CSS

要实现您想要的形状，只需要一点花哨的border-radius样式。

.container {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
.arrow {
  width: 50px;
  height: 30px;
  position: absolute;
  top: 32px;
  left: 25%;
  border-radius: 0px 100% 100% 0px / 0 50% 50% 0;
  background: white;
}

<div class="container">
  <div class="arrow"></div>
</div>

如果您想将它放在一个元素中，您可以使用伪元素来实现。

.arrow {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
.arrow:before {
  content: '';
  width: 50px;
  height: 30px;
  position: absolute;
  top: 32px;
  left: 25%;
  border-radius: 0px 100% 100% 0px / 0 50% 50% 0;
  background: white;
}

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

SVG

对于创建此形状，另一个不错的选择是使用SVG，这也使其完全响应式。

<svg width="100px" height="100px" viewbox="0 0 20 20" style="background: red;">
  <path d="M5,7
           Q15,7 15,10
           Q15,13 5,13z" fill="white"></path>
</svg>

- Stewartside

这太完美了，非常感谢您在此方面的帮助！这将完全按照我的需求工作！ - Ishio

1

我觉得我已经做了一些类似的东西，也许你可以改变一些边距/宽度或高度：

#arrow{
    display: block;
    box-sizing: content-box;
    float: none;
    width: 130px;
    height: 50px;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    outline: none;
    border: 0 solid rgba(0,0,0,1);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #1abc9c;
    box-shadow: none;
    text-shadow: none;
    margin-left:-65px;
}
#arrow:after {
 position:absolute;
    left:-65px;
    width:65px;
    background:transparent;
    content:'';

}

这应该是一个椭圆形，我使用:after隐藏了一半（相当于一个不太好的技巧）

js fiddle

然而，我建议您使用CSS精灵，因为CSS形状对浏览器的阅读不太容易。

希望能帮到您！:)

- CapitanFindus

类似于 width:80px 和 height:20px。 - CapitanFindus

1

这是我的看法。虽然不够尖锐，但已经更接近了一些。编辑：第二个版本使用了两个伪元素来帮助加强角度。

.button { margin: 4em 0; padding: 2em; width: 15%; margin: 0 auto; text-align: center; background-color: #000000; color: #ffffff; isplay: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -moz-flex-flow:row wrap; -webkit-flex-flow:row wrap; -ms-flex-flow:row wrap; flex-flow:row wrap; webkit-justify-content: center; justify-content: center; }

.curved-arrow { 
    position: relative;
    display: inline-block;
    height: 36px;
    width: 56px;
    overflow: hidden;
}
.curved-arrow:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 100% 0 0;
    height: 50%;
    width: 200%;
    background: #FFF;
}
.curved-arrow:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 0 0 100% 0;
    height: 50%;
    width: 200%;
    background: #FFF;
}

<div class="button">
  <div class="curved-arrow"></div>
</div>

- Joseph Marikle

0

像这样的东西？

#arrow-base {
  width: 120px;
  height: 80px;
  background: red;
}
#arrow {
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 32px solid white;
  display: inline-block;
  margin: 24px 44px;
  border-radius: 2px;
}

<div id="arrow-base">
  <div id="arrow">
    <!-- should be empty -->
  </div>
</div>

- Berendschot

否定。我需要左侧的尖端被圆滑处理。如果页面顶部的图像没有显示，请告诉我。 - Ishio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

SVG

CSS的border-radius属性不能轻松地获得您想要的精确输出。我建议使用内联SVG和路径元素，其中包含一个二次贝塞尔曲线命令：

svg{width:100px;}

<svg viewbox="0 0 20 8">
  <path d="M0 0 Q 30 4 0 8" />
</svg>

然后，您可以使用CSS填充属性对箭头进行着色，请参见fiddle（感谢@Nick R在评论中发布的示例）。

CSS

你也可以使用 border-radius 属性的两个值（请参见 MDN 了解其工作原理），这很简单，但它不会让箭头像图像中那样尖锐。

.curved-arrow { 
  width:40px; height:25px;
  background:#000;
  border-top-right-radius:100% 50%;
  border-bottom-right-radius:100% 50%;
  
}

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