Skip to content

Instantly share code, notes, and snippets.

@murtaugh murtaugh/notches.css
Created Mar 10, 2014

Embed
What would you like to do?
.notched-box {
position: relative;
width: 50%;
height: 200px;
margin: 2em auto;
padding: 2em 0;
background: #eee;
overflow: hidden;
}
.notched-box:before,
.notched-box:after {
content:'';
position: absolute;
z-index: 1;
bottom: 0;
height: 0;
width: 50%;
border-bottom: 1.5em solid #fff;
box-sizing: border-box;
}
.notched-box:before {
left: 0;
border-right: 2em solid transparent;
}
.notched-box:after {
right:0;
border-left: 2em solid transparent;
}
.border {
position: absolute;
z-index: 0;
bottom: 0;
left: 0;
width: 100%;
height: .5em;
background: #667388;
box-sizing: border-box;
}
.border.translucent {
background: rgba(0,0,0,.3);
}
.border:before,
.border:after {
content:'';
position: absolute;
bottom: 100%;
width: 51%;
width: calc(50% + 2px);
border-bottom: 1.5em solid #667388;
box-sizing: border-box;
}
.border.translucent:before,
.border.translucent:after {
border-top-color: rgba(0,0,0,.3);
border-bottom-color: rgba(0,0,0,.3);
}
.border:before {
left: 0;
border-right: 2em solid transparent;
}
.border:after {
right: 0;
border-left: 2em solid transparent;
}
p {
margin: 0 2em 1em;
}
p.lipsum:empty:after {
content: 'More text so you can see the notch is transparent. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis pulvinar neque. Nunc blandit mi vel enim tristique adipiscing. Duis gravida justo nec iaculis laoreet. Nullam magna enim, semper eget massa elementum, elementum mattis quam. Curabitur eget venenatis nibh, a hendrerit ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis pulvinar neque. Nunc blandit mi vel enim tristique adipiscing. Duis gravida justo nec iaculis laoreet. Nullam magna enim, semper eget massa elementum, elementum mattis quam. Curabitur eget venenatis nibh, a hendrerit ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis pulvinar neque. Nunc blandit mi vel enim tristique adipiscing. Duis gravida justo nec iaculis laoreet. Nullam magna enim, semper eget massa elementum, elementum mattis quam. Curabitur eget venenatis nibh, a hendrerit ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis pulvinar neque. Nunc blandit mi vel enim tristique adipiscing. Duis gravida justo nec iaculis laoreet. Nullam magna enim, semper eget massa elementum, elementum mattis quam. Curabitur eget venenatis nibh, a hendrerit ligula.';
color: #ccc;
}
<div class="notched-box">
<p>This box has a transparent notch, assembled using both pseudo elements.</p>
<p class="lipsum"></p>
</div>
<div class="notched-box">
<div class="border"></div>
<p>To add a border we need an extra non-semantic element. This extra element needs a background color to fill in the very bottom of the notch.</p>
<p>We set the width of the border's pseudo elements to be a little greater than 50% so the notch's border is the same visual width as the one along the bottom.</p>
<p class="lipsum"></p>
</div>
<div class="notched-box">
<div class="border translucent"></div>
<p>We can make this border translucent. It's imperfect: the borders overlap a tiny bit at the inner junction, but it might be close enough for your purposes.</p>
<p class="lipsum"></p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.