Layer div mit css Form Ausschnitt über ein div mit bg Farbe

Question

Ich versuche, den aktiven Link anzuzeigen, mit einem dreieckigen CSS "Ausschnitt" (das Dreieck ist aus dem weißen Header ausgeschnitten.

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

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

Wie kann ich „ausgeschnitten“ das rote Dreieck sowohl aus dem enthaltenen Header und voller Breite Hintergrund (rot) blockieren? ich brauche das Dreieck ausgeschnitten zu belichten zugrunde liegenden Foto:

Die Kopfzeile funktioniert gut, aber sobald der rote Block voller Breite auf die Hintergrundebene Kopfzeile angewendet wird, wird der Dreiecksausschnitt "ausgefüllt".

UPDATE:

habe ich eine Flexbox innerhalb eines Flexbox. Leider ist der enthaltene Header nicht exakt 1200px, und dies wird schwierig auf das gesamte Layout anzuwenden sein.

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 1

Anstatt es aus einem Hintergrund zu schneiden, y Sie können die Illusion eines Hintergrunds erzeugen, indem Sie rote Elemente auf jeder Seite des weißen Headers mit: before und: after pseudo-elements erstellen.

In http://codepen.io/anon/pen/MyNpdX, habe ich die folgende 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; 
} 

Answer 2

Zu viele Fragen:
lassen Sie mich versuchen, diejenigen zu beantworten, die ich verstanden habe. Ich werde diese Antwort Bearbeitung behalten, wie ich gehen:

1. zu enthalten etwas: Sie folgende Mutter div

.parent { 
    max-width: 1200px; 
    overflow: hidden; 
} 

auf diese Weise ein Kind rot div haben kann, würde nicht außerhalb der Eltern-Constraint erscheinen.

2. Sie CSS- Dreiecke wie erreichen können:

.arrow-up { 
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 

    border-bottom: 15px solid black; 
} 

<div class="arrow-up"></div> 

ps: du bist so weit hinter dem Layout codepen ist in Frage, dass es schwierig ist, das Problem hands-on zu beheben

Answer 3

Platz die enthaltene Flexbox Header, innerhalb eines anderen Flexbox.

Platzieren Sie einen (roten) Block links vom Header und einen (roten) Block rechts.

erstellen max-width für Weißkopf:

@media screen and (min-width: 480px) { 
    .wrapper { /* wraps contained header navbar */ 
    min-width: 1200px; 
    } 
} 

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