带 CSS 的圆角梯形答案

【问题标题】：Rounded trapezoid with CSS带 CSS 的圆角梯形
【发布时间】：2012-10-03 14:32:29
【问题描述】：

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

我需要更多信息，只需发表评论即可。
在此先感谢:)

【问题讨论】：

不可能，使用您尝试的方式。我们正在使用一个大尺寸的透明border-left 属性来伪造梯形形状。那么，相同的部分将如何四舍五入呢？
这可能会有所帮助。看起来很像：stackoverflow.com/questions/8718587/…

标签： border css rounding

【解决方案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/

【讨论】：

【解决方案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 并没有真正具备复杂形状的能力（至少不是故意的）。

【讨论】：

【解决方案3】：

瞧：

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/

【讨论】：

【解决方案4】：

这是我的尝试，哈哈

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

【讨论】：

【解决方案5】：

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

Rendering SVG polygons in Raphael Javascript library

【讨论】：

这是迄今为止唯一理智的答案:)