CSS :after without the elements background

I am trying to use the CSS :after on an element #text, but not have the #text's background continue show behind the after element as I need it to be transparent. I can't just change the background of the after element to #000 because this is just an example and I have other things that should show through it. My code is below.

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

Answers


The pseudo element should be placed below the element itself. For the outer curve, an easy option is to use 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;
}

Edited fiddle: http://jsfiddle.net/fzd9xd07/1/


Need Your Help

Reading a file to char array then malloc size. (C)

c pointers malloc command-line-arguments

Hey, so lets say I get a file as the first command line argument.

How do I add a servlet to replace scriptlets in a JSP?

java jsp servlets

I have inherited a large legacy web application that is constructed mainly of JSP files linked together with HTML frames. I've been reading Working Effectively with Legacy code and I've found a good

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.