8

選択したサイドバー項目に「外側」の丸みを帯びた角を追加して、この項目がコンテンツにうまく「注がれている」という効果を与えたいと考えています。

以下の私の例では.top、グレーの背景で丸みを帯びた右下隅と、 の同様の右上隅が必要.bottomです。どう思いますか？

Twitter Bootstrap と LESS を使用しています。

jsFiddle: http://jsfiddle.net/3YXb2/

これを回します:

レンダリング

これに：

ここに画像の説明を入力

マークアップ:

<div class="wrapper">
    <div class="sidebar">
        <div class="top">
            <p>Top</p>
        </div>
        <div class="middle">
            <p>Middle</p>
        </div>
        <div class="bottom">
            <p>Bottom</p>
        </div>
    </div>
    <div class="container">
        <p>Content</p>
    </div>
</div>

CSS:

body {
    margin:10px;
}
div {
    margin:0;
    margin-right:-4px;
    padding:0;
    display:inline-block;
    vertical-align:middle;
}
.wrapper {
    width:100%;
    display:block;
    border:1px solid;
}
.container {
    background-color:gray;
    width:70%;
    height:300px;
}
.sidebar {
    background-color:white;
    width:30%;
    height:300px;
}
.middle {
    background-color:gray;
}
.top,.middle,.bottom {
    width:100%;
    height:100px;
    display:block;
}
p {
    padding:40px 0 0;
    margin:0;
    text-align:center;
}
4

5 に答える 5

13

Css3 はborder-radiusプロパティを提供します。ただし、これは IE8 以下のバージョンでは利用できないことに注意してください。利用可能なハックがあります。しかし、それらは単なるハックです。

使用法は次のようになります。

    .sidebar {
        background-color:gray;
        width:30%;
        height:300px;
    }
    .middle {
        background-color:gray;
    }
    .top,.middle,.bottom {
        width:100%;
        height:100px;
        display:block;
    }
    .top{
        background: white;
        border-bottom-right-radius:10px;
    }
    .bottom{        
        background: white;
        border-top-right-radius: 10px;
    }

jsFiddle の例

于 2013-04-24T01:04:15.490 に答える
3

私があなたを正しく理解していれば、あなたは反転した境界線の半径を探しています。これはあなたが念頭に置いていることですか？

http://jsfiddle.net/3pW2M/

たとえば、背景画像を表示するために白い領域を透明にする必要がある場合、これは機能しません。

.top {
    position: relative;
}

.topcorner {
    position: absolute;
    margin: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    width: 50px;
    background: gray;
}

.topcorner:after {
    content: '';
    position: absolute;
    height: 50px;
    width: 50px;
    background: white;
    border-radius: 0 0 50px 0;
}
于 2013-04-24T01:18:24.690 に答える
2

CSS の border-radius を使用できます。ここでオンラインのラウンド ボーダー ジェネレーターを確認できます: http://border-radius.com/

于 2013-04-24T01:01:44.080 に答える
2

これは、ある種のユーザー インタラクション、ナビゲーション、タブ、ext で必要になると想定しています。だから私はjqueryのホバー機能でそれを設定しました- jsFiddle

$(document).ready(function () {
  $('.top').hover(function () {
    $('.middle').toggleClass('notSelect2');
    $('.bottom').toggleClass('notSelect3');
  });

  $('.middle').hover(function () {
    $('.top').toggleClass('notSelect');
    $('.bottom').toggleClass('notSelect2');
  });

  $('.bottom').hover(function () {
    $('.middle').toggleClass('notSelect');
    $('.top').toggleClass('notSelect3');
  });
});
于 2013-04-24T02:59:25.937 に答える