3

透明な領域を持つ小さなpngがあり、単色のdivの右下隅として機能させたいのですが、cssでこれを行うためのエレガントな方法を思い付くことができないようです。

私の現在のCSS：

div.example {
  border-radius: 9px;
  background-color: #fff;
  background-image: url(bottom-right-corner-peel.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}

上記のコードの問題は、div（#fff）の背景色がpngの透明部分を通して表示され、効果が損なわれることです。これを修正するための非常にハッキーなアプローチをいくつか考えることができます（たとえば、別のdivを作成する（またはを使用する::after）ことで、問題のdivの下に要素を配置し、いくつかのトリックを使用してそれを機能させることができますが、より良い方法が必要です。 ？

[改訂]デモを見る：

http://jsbin.com/abacey/8/

4

2 に答える 2

1

これがあなたの問題の解決策です：http：//jsfiddle.net/promatik/uZFpZ/

#content-bottom次の横に追加しました#content：

<div id="content">
    <h1>Corner Peel Demo</h1>
</div>
<div id="content-bottom">
    <div id="content-space"></div>
    <div id="content-corner"></div>
</div>

そしてこれをCSSに追加しました：

div#content{
    ...
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
div#content-bottom {
    height: 30px;
    position: relative;
}
div#content-space {
    height: 27px;
    border-bottom-left-radius: 9px;
    background-color: #fff;
    margin-right: 42px;
}

div#content-corner {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 27px;
    width: 42px;
    background-color: transparent;
    background-image: url(data:image/png;base64,...');
}
于 2013-02-19T16:59:58.937 に答える
1

私のアイデアは、pngを使用してdivの隅全体をカバーすることです。pngが40x40pxで、左上部分が白で、下部分が透明であると仮定します。使用できます

border-bottom-right-radius: 40px;

divの角を「切り落とす」。したがって、背景画像が表示されます。次に、pngをその上に置いて、醜い丸い角を覆います。

http://jsfiddle.net/Xd8CD/ （より良いpngが必要です...）

于 2013-02-19T17:26:37.917 に答える