Answer 1:

我最好的尝试： http://dabblet.com/gist/4592062

在任何规模的像素完美，使用更简单的数学比安娜最初的解决方案，而在我看来更直观:)

 .triangle { position: relative; background-color: orange; text-align: left; } .triangle:before, .triangle:after { content: ''; position: absolute; background-color: inherit; } .triangle, .triangle:before, .triangle:after { width: 10em; height: 10em; border-top-right-radius: 30%; } .triangle { transform: rotate(-60deg) skewX(-30deg) scale(1,.866); } .triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); } .triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); }

 <div class="triangle"></div>

Answer 2:

dabblet演示

 .triangle, .triangle:before, .triangle:after { width: 4em; height: 4em; } .triangle { overflow: hidden; position: relative; margin: 7em auto 0; border-radius: 20%; transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866); cursor: pointer; pointer-events: none; } .triangle:before, .triangle:after { position: absolute; background: orange; pointer-events: auto; content: ''; } .triangle:before { border-radius: 20% 20% 20% 53%; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(.866) translateX(-24%); } .triangle:after { border-radius: 20% 20% 53% 20%; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(.866) translateX(24%); } /** extra styles to show how it works **/ .triangle:hover { overflow: visible; } .triangle:hover:before, .triangle:hover:after { background: none; } .triangle:hover, .triangle:hover:before, .triangle:hover:after { border: dashed 1px; }

 <div class='triangle'></div>

这个想法是非常简单的：你第一次应用一系列变换你的.triangle元素（其overflow: hidden; -你可以删除，看看会发生什么;））为了得到一个菱形。

然后，你将相同的变换到:before和:after伪元素，再加上一些，使他们的菱形为好。

而在最后，你有三个菱形相交，橙色的形状是它们的交集。悬停三角形看交叉形状;）

它很好地扩展，你只需要改变width和height的的.triangle元素。

对于Firefox，Chrome和Safari，只有橙色三角形带圆角是悬停敏感（感谢pointer-events: none;所述上.triangle元件和pointer-events: auto;上的伪元素）。否则，这可以通过缠绕来实现.triangle在具有相同的元件width和height （和相同的border-radius ）和overflow: hidden; 。

笔记

你也可以用CSS渐变做到这一点。然而，不同于2D转换，CSS渐变不会在IE9工作。
我希望我没得unskew伪elemets它从其父继承歪斜只旋转后再次扭曲他们，但它似乎并没有工作，否则。

Answer 3:

使用某种形式的图像。这就是图像的。如果你需要它的规模， SVG是一个不错的选择，否则，只是用一个PNG作为背景，或<img>如果它的内容的一部分元素。

如果你绝对必须在CSS文件中有它，你可以尝试的数据：网址（不支持在IE7及以下）。

Answer 4:

安娜的回答启发了我尝试新的方法，一个是刚刚从完美的远，但至少是对称的。这里是在真实尺寸预览和炸毁。它只是一个边境黑客trangle包裹在限幅圆/边界半径：

和代码（通过调整单个的整体尺寸font-size属性）：

.triangle {
    font-size: .8em;
    position: relative;
    width: 3.8em;
    height: 3.8em;
    text-align: center;
    margin: 10% auto 0;
    overflow: hidden;
    border-radius: 100%;
} 
.triangle:before {
    content: '';
    position: absolute;
    width:0;
    height: 0;
    border: solid 2em transparent;
    border-bottom-color: orange;
    border-bottom-width: 3.2em;
    border-top-width: 0;
    margin: -.3em -2em;
}

在这里发挥它： http://dabblet.com/gist/4590714

Answer 5:

穆雷史密斯最upvoted版本发挥各地。写手写笔混入并修正了一些余量问题，并增加了一个方向的选择。该混入还可以进行扩展三角形有所pixelperfect大小。未测试非常好。小心使用

http://codepen.io/perlundgren/pen/VYGdwX

    triangle(direction = up, color = #333, size = 32px)
        position: relative
        background-color: color
        width:  2*(round(size/3.25))
        height: 2*(round(size/3.25))
        border-top-right-radius: 30%
        &:before,
        &:after
          content: ''
          position: absolute
          background-color: inherit
          width:  2*(round(size/3.25))
          height: 2*(round(size/3.25))
          border-top-right-radius: 30%

        if direction is up
          transform: rotate(-60deg) skewX(-30deg) scale(1,.866)
          margin: (@width/4) (@width/2.5) (@width/1.2) (@width/2.5)

        if direction is down
          transform: rotate(-120deg) skewX(-30deg) scale(1,.866)
          margin: 0 (@width/1.5) (@width/1.5) (@width/6)

        if direction is left
          transform: rotate(-30deg) skewX(-30deg) scale(1,.866)
          margin: (@width/5) 0 (@width) (@width/1.4)

        if direction is right
          transform: rotate(-90deg) skewX(-30deg) scale(1,.866)
          margin: (@width/5) (@width/1.4) (@width) 0

        &:before
          transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%)
        &:after
          transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%)

然后就在混入添加到您的类

    .triangle
      &.up
        triangle()
      &.down
        triangle(down)
      &.left
        triangle(left)
      &.right
        triangle(right)

文章来源: How to make 3-corner-rounded triangle in CSS