我正在尝试制作一个如下所示的箭头：
然而，这是我能得到的最接近的：
.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 边框半径不会让您轻松获得所需的精确输出。我建议使用一个内联 SVG，其路径元素带有一个二次贝塞尔曲线命令 https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Bezier_Curves :
svg{width:100px;}
<svg viewbox="0 0 20 8">
<path d="M0 0 Q 30 4 0 8" />
</svg>
然后你可以使用 CSS fill 属性为箭头着色，请参阅此fiddle http://jsfiddle.net/kcnv7fm0/（归功于@Nick R https://stackoverflow.com/users/2470724/nick-r对于评论中发布的示例）
CSS
您还可以使用 border-radius 属性的 2 个值（请参阅MDN https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius有关其工作原理的解释）它很简单，但它不会让您使箭头“指向”像图像中那样尖锐：
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
