用CSS圆角箭头

Question

  

可能重复：
  How to create a triangle in CSS3 using border-radius

是否可以使用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/）

圆形箭头（我只希望底部圆形）：

：（

Answer 1

是的，有可能！您rotate方框，给它border-radius并使用45deg linear-gradient作为background。

DEMO

<强> 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 gradients are not supported by IE9这一事实（我这次不是说“或更老”，因为你在标签中提到了CSS3）。在这种情况下的解决方案是使用实心背景并以某种方式确保上部不会显示，或者通过用前面的元素覆盖它，或者通过剪切它（参见the answer Tim Medora提供的）。

此外，此时仍然不支持未加前缀的语法（虽然这很快就会改变：D），因此您需要手动添加前缀-webkit-，-moz-和-o-。 （我没有在演示中添加它们，因为Dabblet使用-prefix-free来处理这个问题。）

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;
}

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>