创建一个圆形的箭头 [英] Create a rounded arrow

问题描述

我正在尝试制作如下所示的箭头：

但是，这是我能找到的最接近的>

  .button {margin：4em 0;填充：2em;宽度：15％;保证金：0自动;文本对齐：居中；背景颜色：＃000000;颜色：#ffffff;显示：-moz-box;显示：-ms-flexbox;显示：-webkit-flex;显示：flex; -moz-flex-flow：行换行； -webkit-flex-flow：行换行； -ms-flex-flow：行换行； flex-flow：行换行； webkit-justify-content：中心； justify-content：center;}。curved-arrow {display：inline-block; border-top：10px实心#fff; border-bottom：10px实心#fff; border-left：30px实线#fff;右上角边框半径：100％； border-bottom-right-radius：100％;}  

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

这甚至可能吗？我知道我可以使用图像，但是我的设计师将其中的几种颜色制成了多种颜色，以便在整个网站中使用，我宁愿只使用CSS来制作形状。

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

解决方案

SVG

CSS边框半径不会让您得到您正在寻找的确切输出。我建议使用带有的path元素的嵌入式SVG。二次贝塞尔曲线命令：

  svg {width：100px;}  

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

然后您可以使用CSS fill属性为箭头着色，请参见 fiddle （对于发表在评论中的示例，贷方为 @Nick R ）

---

CSS

您还可以使用border-radius属性的2个值（请参见 MDN 来解释其工作原理），它很简单，但不会让您使箭头点与图像中的箭头一样锐利：

  .curved-arrow {宽度：40px;高度：25像素；背景：＃000；右上边界半径：100％50％;右下边框半径：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>

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