Goatsy Goatsy - 6 months ago 27
CSS Question

Layer div with css shape cut-out over a div with bg color

I'm trying to indicate the active link, using a triangle-shaped CSS "cut-out" (the triangle is cut out of the white header.

http://codepen.io/Goatsy/pen/xVvRmZ

/*
.container {
width: 1200px;
}
*/


How do I "cut out" the red triangle from both the contained header and full-width background (red) block? I need to cut out the triangle to expose underlying photo.

The header works great, but as soon as the full-width red block is applied to the background layer of contained header, it "fills in" the triangle cut-out.

The triangle cut out is not possible when there's a full-width colored background block.

UPDATE:

I created a flexbox within a flexbox. Unfortunately, the contained header is not exactly 1200px, and this will be difficult to apply to the overall layout.

http://codepen.io/Goatsy/pen/xVvRmZ

.wrapper-whole {
display: flex;
flex-direction: row;
height: 134px;
margin: auto;
}
.flexy {
background: #f00;
flex: 2;
height: 134px;
}
.wrapper { /* wraps contained header navbar */
display: flex;
flex-direction: row;
height: 134px;
border-left: 15px solid #fff;
border-right: 15px solid #fff;
max-width: 1200px;
margin: auto;
flex: 6;
}

Answer

Instead of cutting it out from a background, you could create the illusion of a background by making red elements on each side of the white header using :before and :after pseudo-elements.

In http://codepen.io/anon/pen/MyNpdX, I added the following CSS:

.wrapper {
  /* the stuff that was already here */
  position: relative;
}

.wrapper:after, .wrapper:before{
  content: "";
  background-color: #f00;
  width: 4000px;
  position: absolute;
  height: 134px;
  top: 0;
}
.wrapper:before{
  margin-right: 15px;
  right: 100%;
}
.wrapper:after{
  left: 100%;
  margin-left: 15px;
}
Comments