Question

我正在尝试使用border-radius属性设计一个主内容容器有圆角的网站。但是，我保持侧边栏和顶部导航栏固定，以便当用户向上或向下滚动时它们不会移动。它类似于Google Plus上可以看到的内容：

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

我的问题是：如何为z-index值小于其他元素的内容容器设置border-radius，以便在用户滚动时圆角不会重叠并被其他元素隐藏？ / p>

在下面的示例中，我希望导航栏和侧边栏相遇的角落是弯曲的，但无法弄清楚如何

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;
}

Answer 1

这是你想要的吗？ 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 */
}

较小的z-index元素的圆角

1 个答案: