html - CSS :after without the elements background

Question

我正在尝试在#text 元素上使用CSS :after，但没有让#text 的背景继续显示在after 元素后面，因为我需要它是透明的。我不能只将 after 元素的背景更改为 #000，因为这只是一个示例，我还有其他应该通过它显示的内容。我的代码如下。

HTML:

<div id="text">
    <div class="news">This is some sample text.</div>
</div>
<div id="logo"></div>

CSS:

body {
    background: #000;
    margin: 0;
}

#logo {
    position: relative;
    float: left;
    background: #FFFFFF;
    width: 25%;
    height: 80px;
    line-height: 80px;
    border: 1px solid #a0a4b0;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    text-align: center;
    box-sizing: border-box;
}

#text {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #a0a4b0;
    border-width: 0 1px 0 1px;
    padding: 5px 30px 15px;
    z-index: 100;
    line-height: 1.1;
}

#text:after {
    content: " ";
    position: absolute;
    bottom: -1px;
    right: 1px;
    width: 75%;
    box-sizing: border-box;
    height: 8px;
    border: 1px solid #a0a4b0;
    border-width: 1px 0 0 1px;
    border-radius: 8px 0 0 0;
}

Fiddle Example

Answer 1

伪元素应该放在元素本身的下面。对于外曲线，一个简单的选择是使用 box-shadow:

#text:after {
    content: " ";
    position: absolute;
    bottom: -8px; /* move below parent's background */
    right: 1px;
    width: 75%;
    box-sizing: border-box;
    height: 8px;
    border: 1px solid #a0a4b0;
    box-shadow: -4px -4px 0 4px #fff; /* white outside rounded corner */
    border-width: 1px 0 0 1px;
    border-radius: 8px 0 0 0;
}

编辑 fiddle :http://jsfiddle.net/fzd9xd07/1/