2

すべての角が丸くなった台形を作成したいと考えています。4 分の 2 は進みましたが、下の角をきれいに見せることができません。これが私がこれまでに持っているものです: http://jsfiddle.net/w8rHk/2/

色の違いはイメージです。最終的には同じ色になります。

質問:これをどのように仕上げて、端が丸みを帯びた台形にするにはどうすればよいですか?

壊れずに画面サイズに合わせて拡大縮小できれば100万点。まだまだ近寄れない忍者レベルだ。

質問 2:この不良少年にグラデーションをかける方法はありますか?

助けてくれてありがとう！

コード：

.trapezoid{
vertical-align: middle;
position:relative;
border-bottom: 120px solid blue;
border-left: 200px solid transparent;
border-top-left-radius:30px;
border-top-right-radius:30px;
*border-bottom-right-radius:3px;
height: 0;
width: 150px;}

.trapezoid:after {
content:' ';
left:-14px;
top:-10px;
position:absolute;
background:red;
border-radius:40px 30px 0 0;
width:164px;
height:40px;
display:block;
}​
4

1 に答える 1

1

これが私の試みです笑

.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-08T20:39:32.050 に答える