1

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

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

我的问题是：如何为 z-index 值小于其他元素的内容容器设置边框半径，以便在用户滚动时圆角不会被其他元素重叠和隐藏？

在下面的示例中，我希望导航栏和侧边栏相交的角落是弯曲的，但不知道如何

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 回答