我正在使用border-radius 属性来实现圆角。但我不确定如何获得这种形状的圆角。我尝试从两侧给出相同的尺寸，但它们只是不给我确切的形状。我在这里错过了一些 CSS3 属性吗？
只是想知道clip css属性是否就是答案。
更新：
【问题讨论】：
标签： html css css-shapes
#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 图像支持这种类型的形状，并且在所有现代浏览器中都受支持。简单的 SVG 可以手动编码为 XML，并且有各种免费/付费的编辑器可以使用它们。
另见：Raphaël, a library for working with vector graphics on the web
【讨论】：
div之上。
border 属性，如果正确使用它来创建三角形，应该可以在 IE7+ 以及几乎所有 Firefox、Chrome 和 Safari 中使用
具有不同边框半径的不同大小的三角形
翻转或改变垂直对齐 fork translateY() 和 rotate()
/*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>【讨论】：
如果我正确理解了您的问题。我认为您可以使用以下内容：
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>
现场演示
【讨论】：
<!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>
【讨论】：
这样更好
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>
【讨论】：
我用它来添加三角形链接：
.review-box_left-link:after{
content: '';
position: absolute;
width: 19px;
height: 19px;
background: #2195DB;
border-radius: 2px;
transform: rotate(-45deg);
background: linear-gradient(to right bottom, white 0%,white 50%,#2195DB 50%,#2195DB 50%,#2195DB 100%);
}
【讨论】：