创建rouded箭头 [英] Create a rouded arrow

问题描述

我想要创建一个类似这样的箭头：

但是，这是我可以得到的最接近：

  .button {margin：4em 0; padding：2em;宽度：15％; margin：0 auto; text-align：center; background-color：＃000000; color：#ffffff;显示：-moz-box; display：-ms-flexbox;显示：-webkit-flex;显示：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>  

$ b

这是可能吗？我知道我可以使用图像，但我的设计师使用多种颜色的这些，使用整个网站，我宁愿只使用CSS的形状。

如果很难看到它是从左到右从上到下的平直线，并且弯曲到右边的中间。

解决方案

SVG

CSS边框半径不会让您您准确的输出您正在寻找容易。我建议一个带有一个二次函数的路径元素的内嵌SVG bezier命令：

  svg {width：100px;}  

pre class =snippet-code-html lang-html prettyprint-override> < svg viewbox =0 0 20 8> < path d =M0 0 Q 30 4 0 8/>< / svg>

$ b

然后，您可以使用CSS填充属性为箭头着色，请参阅小提琴 （针对评论中发布的示例 @Nick R ）

---

CSS

您也可以使用border-radius属性的2个值=https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius =nofollow> MDN 了解其工作原理）是简单的，但它不会让你使箭头'点'像你的形象一样清晰：

  .curved-arrow { width：40px; height：25px;背景：＃000; border-top-right-radius：100％50％; border-bottom-right-radius：100％50％; }  

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

I am trying to make an arrow that looks like this:

However, this is the closest I can get to it:

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

Is this even possible? I know I can use images, but my designer made several of these in multiple colors to use throughout the site that I'd rather just use CSS for the shape.

If it's hard to see it's a flat straight line from top to bottom on the left, and curves in to the middle on the right.

解决方案

SVG

CSS border radius won't let you get the exact output you are looking for easily. I would suggest an inline SVG with the path element with one quadratic bezier command :

svg{width:100px;}

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

Then you can color the arrow with the CSS fill property, see this fiddle (credits to @Nick R for the example posted in the comments)

---

CSS

You can also use the 2 values for the border-radius property (see MDN for an explanation of how it works) it is simple but it won't let you make the arrow 'point' as sharp as it is in your image :

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

这篇关于创建rouded箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！