带 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>