我试图制作一个如下所示的箭头：
然而,这是最接近的：
.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来形状.
如果很难看到它是从左到右从上到下的平直的直线,并且曲线到右边的中间.
解决方法
SVG
CSS边框半径不会让您轻松获得准确的输出.我建议一个带有一个quadratic bezier command的路径元素的内联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属性的2个值(请参阅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>
