1

border-radius プロパティを使用してメイン コンテンツ コンテナの角を丸くした Web サイトをデザインしようとしています。ただし、ユーザーが上下にスクロールしても移動しないように、サイドバーと上部のナビゲーション バーを固定したままにしています。これは、Google Plus で見られるものと似ています。

http://www.techzek.com/wp-content/uploads/gsmarena_00121.jpg .

私の質問は次のとおりです:ユーザーがスクロールするときに、丸みを帯びた角が他の要素によって重なって隠されないように、他の要素よりも小さい z-index 値を持つ content-container のボーダー半径を設定するにはどうすればよいですか?

次の例では、ナビゲーション バーとサイドバーが交わる角を湾曲させたいのですが、方法がわかりません。

HTML:

<body>
    <div class="navbar">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Sign In</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <div class="sidebar"></div>

    <div class="contentcontainer"></div>
</body>

CSS:

html, body {
    background-color: #eee;
    height: 100%;
}

.navbar {
    position:fixed;
    width:100%;
    height:50px;
    display:inline;
    z-index:2;
    background: rgb(61,40,77);
}

.navbar ul{
    float:right;
    display:block;
    padding-top:14px;
    padding-right:10px;
}

.navbar li {
    padding:15px;
    display:inline;
}

.sidebar {
    position:fixed;
    height:100%;
    margin-top:50px;
    width:170px;
    background: rgb(61,40,77);
    color: #eee;
}

.contentcontainer {
    position:absolute;
    margin-left:200px;
    margin-top:65px;
    z-index:1;
    width:82%;
    max-width:980px;
    background-color:#fbfbfb;
    border-style:solid;
    border-width:1px;
    border-color:black;
    border-radius:18px;
}
4

1 に答える 1

0

これは、あなたの望むことですか？Codepen

ここにトリックがあります。で円を作りますborder-radius。ナビとサイドバーの交差点に置きます。border-color: transparent色を設定するための影を設定して取得します。

.sidebar:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 0px;
  right: -20px; /* negative (border-width * 2) */
  border-radius: 10px; /* same as border-width */
  border: 10px solid transparent;
  box-shadow: -10px -10px 0 rgb(61,40,77); /* first two values = negative border-width */
}
于 2013-01-03T00:06:55.370 に答える