使用CSS创建圆角箭头

Question

可能是重复的问题：
如何使用border-radius在CSS3中创建三角形

是否可以使用CSS来制作它们？

普通箭头：

.some_element:after{      
  content: '';
  height: 0;
  width: 0;
  position: absolute;        
  top: 0;
  left: 0;       
  border: 100px solid transparent;
  border-top-color: #000;           
}

(http://jsfiddle.net/W3xwE/)

圆角箭头（仅需要底部圆形）:

:(

- Alex

---

不认为CSS具有端点功能（但我还没有仔细研究过CSS3，所以可能在这方面是错误的），但HTML5画布元素确实具有端点。 - Marc B

可以做到，但需要一些技巧，或者你可以使用HTML5？通过画布脚本实现。 - Simon Dragsbæk

不同的方向，但这可能会有所帮助：https://dev59.com/l2ct5IYBdhLWcg3wgNnR#12042194 - Tim M.

Answer 1

是的，这是可能的！您可以使用rotate旋转盒子，给它一个border-radius并使用45deglinear-gradient作为background。

演示

HTML：

<div class='arrow'></div>

CSS：

.arrow {
    width: 7em;
    height: 7em;
    border-radius: 0 0 2em 0;
    margin: 5em;
    transform: rotate(45deg);
    background: linear-gradient(-45deg, black 50%, transparent 50%);

}

如果您想要箭头的角度不同，那么您也可以使用 skew 来实现。

请注意 CSS 渐变在 IE9 中不受支持（这次我没有说“或更早”，因为您在标签中提到了 CSS3）。在这种情况下的解决方案是使用纯色背景，并确保上部分不会显示，可以通过覆盖它的前面元素或裁剪它来实现（请参见Tim Medora 的答案）。

此外，目前还没有支持无前缀语法的浏览器（尽管这很快就会改变:D），因此您需要手动添加前缀 -webkit-、-moz- 和 -o-。（我在演示中没有添加它们，因为 Dabblet 使用 -prefix-free 来处理这个问题。）

- Ana

---

Mozilla Firefox不支持，请添加相关代码。 - Web Designer cum Promoter

background: -moz-linear-gradient(-45deg, black 50%, transparent 50%);。 - Ana

谢谢:P 我希望我像你一样懂CSS :( - Alex

Answer 2

这里提供一种方法，通过将旋转的正方形放置在一个框内来控制剪切。个人认为@Ana的解决方案更加简洁。 http://jsfiddle.net/K44mE/14/

<div id="outer"><div id="inner">&nbsp;</div></div>

#inner{
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color:silver;
    width:100px;
    height:100px;
    top: -70px;
    left: 20px;
    position:relative;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

#outer {
    position: absolute;
    width: 140px;
    height: 70px;    
    top:10px;
    left:10px;
    overflow: hidden;    
    border: 1px solid red;
}

- Tim M.

Answer 3

CSS

 .arrow {
        width: 7em;
        height: 7em;
        border-radius: 0 0 2em 0;
        margin: -2em 2.5em;
        transform: rotate(45deg);
        background: linear-gradient(-45deg, black 50%, transparent 50%);

    }

HTML

<div class='arrow'></div>

- GajendraSinghParihar

---

这不是很有趣吗？看起来就像我做的演示。我自作自受，我应该相信超自然现象。 - Ana

我不知道这是怎么发生的，我以为演示页面是我的搜索结果页面之一 :P - GajendraSinghParihar