带CSS的圆形梯形 [英] Rounded trapezoid with CSS

问题描述

我有一个小问题与css。我需要一个梯形div，其左上角（90度以上的角度）是圆角。我已经知道这一点：

HTML：

 < div style =margin：30px> 
< div class =trapezoid> 
< / div> 
< / div> 
  

CSS：

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

我需要更多信息才能发表评论。

提前感谢：）

解决方案

虽然我认为你最好使用< canvas& / code> / SVG绘制这个形状，这是接近你想要的：

  .trapezoid {
 vertical-align：middle; 
 border-bottom：120px solid red; 
 border-left：200px solid transparent; 
 border-top-left-radius：30px; 
 height：0; 
 width：150px;} 
 
 / * ---------- * / 
 
 .tapezoid {
 position：relative; 
} 
 .tapezoid：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/

这不是完美的，你必须使用数字得到你想要的尺寸，它是非常finicky。您可能对绘图中的Raphaël感兴趣，CSS实际上并不具有复杂形状的能力（至少不是有意的）。

I'm having a slight problem with css. I need a trapezoid div which upper left corner(the one with the angle above 90 degrees) is rounded. I already know that this:

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

produces a trapezoid. I tried the border-top-left-radius property, however the effect is not sufficent enough.

Here's a jsfiddle with the above code to, well, fiddle with: http://jsfiddle.net/n3TLP/5/

I there is more info needed just comment.
Thanks in advance :)

解决方案

Although I think you're better off using <canvas>/SVG to draw this shape, this is close to what you want:

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

Demo: http://jsfiddle.net/n3TLP/20/

It's not perfect, and you'll have to play with the numbers to get your desired dimensions, it's very finicky. You might be interested in something like Raphaël for drawing, CSS doesn't really have the capacity for complex shapes (at least not intentionally).

这篇关于带CSS的圆形梯形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！