用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/)

圆形箭头(我只希望底部圆形):

:(

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可以.

考虑到IE9不支持CSS渐变的事实(这次我不是说"或更老",因为你在标签中提到了CSS3).在这种情况下的解决方案是使用坚实的背景,并以某种方式确保上部不会显示,或者通过用前面的元素覆盖它,或者通过剪切它(参见Tim Medora提供的答案).

此外,在这一点上仍然是为前缀的语法不支持(虽然这会很快发生变化:d),所以你需要手动添加前缀-webkit-,-moz-和-o-.(我没有在演示中添加它们,因为Dabblet使用-prefix-free来处理这个问题.)