9

可能重复：
如何使用边框半径在 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/ )

圆角箭头（我只想要圆角的底边）：

在此处输入图像描述

:(

4

3 回答 3

19

对的，这是可能的！你rotate这个盒子，给它 aborder-radius并将 a45deg linear-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可以。

考虑到IE9 不支持 CSS 渐变这一事实（这次我不是说“或更旧”，因为您在标签中提到了 CSS3）。在这种情况下，解决方案是使用纯色背景，并以某种方式确保上部不会显示，方法是用前面的元素覆盖它，或者剪掉它（参见Tim Medora提供的答案）。

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

于 2012-09-17T14:36:24.247 回答
3

这是一种通过在框内放置一个旋转的正方形来控制剪裁的方法。就个人而言，我认为@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;
}
于 2012-09-17T14:39:11.147 回答
0

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>
于 2012-09-17T14:53:51.213 回答