圓角與CSS的梯形

我有一個小問題與CSS。我需要一個左上角（角度大於90度的角）圓角的梯形div。我已經知道這：圓角與CSS的梯形

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/

我也只是發表評論需要更多的信息。
感謝提前:)

來源

2012-10-03 Cornelius

它不可能，使用您正在嘗試的方式。我們正在使用一個大尺寸的透明「border-left」屬性來僞造梯形。那麼，如何將相同的部分舍入？ – Starx

這可能有幫助。它看起來相似：http://stackoverflow.com/questions/8718587/is-it-possible-to-style-a-div-to-be-trapezoidal – Grixxly

雖然我覺得你最好不要使用<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-03 14:51:59

使用Adobe Illustrator或任何其他軟件繪製形狀並將其保存爲SVG代碼，您可以直接在頁面上使用SVG，但IE8和更低版本將忽略它。如果您需要支持較舊版本的IE，則可以使用Raphael.js繪製您的SVG元素。

Rendering SVG polygons in Raphael Javascript library

來源

2012-10-03 15:02:35 gidzior

這是迄今唯一的理智的答案:) – Duopixel

瞧：

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-03 16:05:13 Puyol

不是說你應該永遠做到這一點，但你也可以創建一個圓角梯形通過應用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/

來源

2012-10-03 16:36:58 Duopixel

這是我嘗試笑

.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-09 03:39:22

圓角與CSS的梯形

回答

相關問題