[英]Rounded trapezoid with CSS
我在使用 css 时遇到了一个小问题。 我需要一个梯形 div,它的左上角(角度大于 90 度的那个)是圆角的。 我已经知道这个:
HTML:
<div style="margin:30px">
<div class="trapezoid">
</div>
</div>
CSS:
.trapezoid{
vertical-align: middle;
border-bottom: 31px solid red;
border-left: 25px solid transparent;
height: 0;
width: 150px;
}
产生梯形。 我尝试了border-top-left-radius
属性,但效果还不够。
这是一个带有上述代码的 jsfiddle,用于: http : //jsfiddle.net/n3TLP/5/
我需要更多信息,请发表评论。
提前致谢 :)
并不是说你应该这样做,但你也可以通过应用 CSS 3d 转换来创建一个带有单个元素的圆角梯形:
.trapezoid {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.trapezoid:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: red;
border-radius: 20px 0 0 0;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: perspective(400px) rotateX(45deg);
-moz-transform: perspective(400px) rotateX(45deg);
-ms-transform: perspective(400px) rotateX(45deg);
-o-transform: perspective(400px) rotateX(45deg);
transform: perspective(400px) rotateX(45deg);
}
虽然我认为你最好使用<canvas>
/SVG 来绘制这个形状,但这与你想要的很接近:
.trapezoid{
vertical-align: middle;
border-bottom: 120px solid red;
border-left: 200px solid transparent;
border-top-left-radius:30px;
height: 0;
width: 150px;}
/* ---------- */
.trapezoid {
position:relative;
}
.trapezoid:after {
content:' ';
left:-14px;
top:-10px;
position:absolute;
background:red;
border-radius:40px 0 0 0;
width:164px;
height:40px;
display:block;
}
演示: http : //jsfiddle.net/n3TLP/20/
它并不完美,您必须使用数字来获得所需的尺寸,这非常挑剔。 您可能对Raphaël 之类的绘图感兴趣,CSS 并没有真正具有复杂形状的能力(至少不是故意的)。
使用 Adobe Illustrator 或其他任何软件绘制形状并将其保存为 SVG 代码,您可以直接在页面上使用 SVG,但 IE8 及更低版本将忽略它。 如果您需要支持旧版本的 IE,您可以使用 Raphael.js 来绘制您的 SVG 元素。
瞧:
css:
.trapezoid{
vertical-align: middle;
background: red;
padding-left: 200px;
height: 120px;
width: 150px;
position: relative;
border-top-left-radius: 40px;
overflow: hidden;
background-clip: content-box;
}
.trapezoid:after{
content: '';
margin-left: -100px;
top: 0;
height: 120px;
background: red;
transform: skew(-31deg,0deg);
-o-transform: skew(-31deg,0deg);
-ms-transform: skew(-31deg,0deg);
-moz-transform: skew(-31deg,0deg);
-webkit-transform: skew(-59deg,0deg);
position: absolute;
width: 1000px;
border-top-left-radius: 40px;
}
这是我的尝试,哈哈
.trapezoid{
position:relative;
border-bottom: 100px solid blue;
border-right: 12px solid transparent;
border-left: 180px solid transparent;
width: 122px;
}
.trapezoid:before{
content:' ';
left:-184px;
top:98px;
position:absolute;
background:blue;
border-radius:80px 20px 80px 80px;
width:318px;
height:20px;
}
.trapezoid:after {
content:' ';
left:-11px;
top:-7px;
position:absolute;
background:blue;
border-radius:150px 50px 90px 0px;
width:133px;
height:30px;
}
<div style="margin:30px">
<div class="trapezoid">
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.