如何使用边界半径，以创建CSS3三角形如何使用边界半径，以创建CSS3三角形(How to crea

我使用的边界半径财产acheive圆角。但我不知道如何让这种形状的圆角。我试图从两侧赋予相同的尺寸，但他们就是不给我确切的形状。我在这里缺少一些CSS3属性。

只是想知道如果剪辑CSS属性就是答案。

更新：

http://jsfiddle.net/YWnzc/136/

Answer 1:

演示

 #player { margin: 32px; position: relative; width: 400px; height: 250px; background-color: #222; } #inner { transform: rotate(45deg); background-color: silver; width: 100px; height: 100px; top: 20px; left: -50px; position: relative; border-radius: 20px; } #outer { position: absolute; top: 50px; left: 165px; width: 70px; height: 140px; overflow: hidden; }

 <div id="player"> <div id="outer"> <div id="inner"></div> </div> </div>

这将产生：

效果是通过创建一个正方形，具有CSS使其旋转变换，舍入的角部，并与外箱裁剪它来实现的。可以根据需要进行调整的内元件，因此它是稍微柔性的。

http://css3shapes.com/有一些很好的例子（注意在页面底部的心脏）

备择方案

SVG图像支持这种类型的形状，并在所有现代浏览器都支持。简单SVGs可以用手为XML编码，并有与他们合作的各种免费/付费的编辑。

另请参见：拉斐尔，图书馆与矢量图形在网络上工作

Answer 2:

如果我正确理解你的问题。我想你可以使用类似如下：

CSS：

#box{   border-color: transparent transparent transparent #FFFFFF;
    border-style: solid;
    border-width: 50px 0 50px 75px;
    height: 0;
    left: -40px;
    margin: 40px;
    position: absolute;
    width: 0;
}
 #outerbox{  background:red;
    height: 300px;
    position: relative;
    width: 122px;
}

HTML

<div id="outerbox"><div id="box"></div></div>

现场演示

http://jsfiddle.net/fsGQR//

Answer 3:

如果你想要的是一个直角三角形，这应该是所有您需要：

#box {
  border-top: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 100px solid #990000;
  margin: 40px;
}

无需边界半径，当然也不SVG。这应该在所有的现代浏览器，和IE8 +（我仍然有一个困难时期呼唤IE8现代）。

演示： http://jsfiddle.net/RCzAt/4/

更多关于CSS三角形： http://css-tricks.com/snippets/css/css-triangle/

Answer 4:

在不同大小的圆角半径三角形

翻转或改变垂直取向叉平移Y（）和旋转（）

 /*triangle background large*/ .triangle-bg-lg, .triangle-bg-lg:before, .triangle-bg-lg:after { width: 25em; height: 25em; } /*triangle background medium*/ .triangle-bg-md, .triangle-bg-md:before, .triangle-bg-md:after { width: 20em; height: 20em; } /*triangle background small*/ .triangle-bg-sm, .triangle-bg-sm:before, .triangle-bg-sm:after { width: 15em; height: 15em; } /*triangle background extra small*/ .triangle-bg-xs, .triangle-bg-xs:before, .triangle-bg-xs:after { width: 10em; height: 10em; } /*triangle background extra extra small*/ .triangle-bg-xxs, .triangle-bg-xxs:before, .triangle-bg-xxs:after { width: 5em; height: 5em; } /*common triangle style*/ .triangle-bg-lg,.triangle-bg-md, .triangle-bg-sm,.triangle-bg-xs,.triangle-bg-xxs { overflow: hidden; position: relative; margin:2em auto; border-radius: 20%; transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866); } .triangle-bg-lg:before, .triangle-bg-lg:after,.triangle-bg-md:before, .triangle-bg-md:after, .triangle-bg-sm:before, .triangle-bg-sm:after,.triangle-bg-xxs:before, .triangle-bg-xxs:after{ position: absolute; background: #ccc; pointer-events: auto; content: ''; } .triangle-bg-xs:before, .triangle-bg-xs:after{ background: #ccc; position: absolute; pointer-events: auto; content: ''; } .triangle-bg-lg:before, .triangle-bg-md:before, .triangle-bg-sm:before, .triangle-bg-xs:before,.triangle-bg-xxs: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-bg-lg:after, .triangle-bg-md:after,.triangle-bg-sm:after,.triangle-bg-xs:after,.triangle-bg-xxs:after { border-radius: 20% 20% 53% 20%; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(.866) translateX(24%); }

 <div class="page-container"> <div class="triangle-bg-lg"></div> <div class="triangle-bg-md"></div> <div class="triangle-bg-sm"></div> <div class="triangle-bg-xs"></div> <div class="triangle-bg-xxs"></div> </div>

Answer 5:

这是更好

CSS

.c1 {
    width:50px;
    height:50px;
    background-color:yellow;
    -webkit-transform:rotate(45deg);
    position: relative;
    top: -65px;
    left: 25px;
    z-index:-1;
    border: 2px solid rgba(0,255,0,.6);
}
.c2 {
    width: 50px;
    height: 72px;
    background-color: yellow;
    z-index: 10000;
    border: 2px solid rgba(0,255,0,.6);
    border-right: 0;
}

HTML

<div class="c2">Hello</div>
<div class="c1"></div>

DEMO： http://jsfiddle.net/YWnzc/237/

Answer 6:

<!DOCTYPE html>
<html>
<head>
<style>

.trio {position:absolute;}
.trio .triangle {
    position: relative;
    background-color: #DB524B;
    text-align: left;
}
.trio .triangle:before,
.trio .triangle:after {
    content: '';
    position: absolute;
    background-color: inherit;
}
.trio .triangle,
.trio .triangle:before,
.trio .triangle:after {
    width:  3em;
    height: 3em;
    border-top-right-radius: 33%;
}

.trio .triangle {
    transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.trio .triangle:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.trio .triangle:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
.trio .exclamation{
    color: #DB524B;
    position:absolute;
    font-size:50px;
    top:8px;
    left:15px;
    z-index:2;
}

.trio .triangle.tri-in {
    background-color: #fff;
    margin-top: -2.9em;
    margin-left: 1px;
}
.trio .tri-in,
.trio .tri-in:before,
.trio .tri-in:after {
    width:  2.9em;
    height: 2.9em;
    border-top-right-radius: 33%;
}
/* styles below for demonstration purposes only */
body { padding: 30%; }
</style>
</head>
<body>
<div class="trio">
<span class="exclamation">!</span>
<div class='triangle'></div>
<div class='triangle tri-in'></div>
</div>
</body>
</html>

文章来源: How to create a triangle in CSS3 using border-radius