4

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

我有更多信息需要评论。
提前致谢 ：）

4

5 回答 5

8

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

​</p>

http://jsfiddle.net/RzJTP/

于 2012-10-03T16:36:58.177 回答
7

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

于 2012-10-03T14:51:59.777 回答
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/

于 2012-10-03T16:05:13.343 回答
3

这是我的尝试哈哈

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

于 2012-12-09T03:39:22.417 回答
2

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

在 Raphael Javascript 库中渲染 SVG 多边形

于 2012-10-03T15:02:35.993 回答