Question

我对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/

我需要更多信息才能发表评论在此先感谢：）

Answer 1

不是你应该这样做，但是你也可以通过应用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);
}

http://jsfiddle.net/RzJTP/

Answer 2

虽然我认为你最好使用<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实际上并不具备复杂形状的能力（至少不是故意的）。

Answer 3

这是我的尝试lol

.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>

http://jsfiddle.net/Bzj3h/

Answer 4

使用Adobe Illustrator或任何其他软件绘制形状而不是将其保存为SVG代码，您可以直接在页面上使用SVG，但IE8及更低版本将忽略它。如果您需要支持旧版本的IE，可以使用Raphael.js绘制SVG元素。

Rendering SVG polygons in Raphael Javascript library

Answer 5

Voila：

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;
}

演示：
http://jsfiddle.net/n3TLP/24/

用CSS圆角梯形

5 个答案: