具有cg形状的图层div在具有bg颜色的div上切出

Question

我尝试使用三角形的CSS＆＃34; cut-out＆＃34;来指示活动链接。 （三角形从白色标题中切出。

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

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

我如何＆＃34;切断＆＃34;来自包含标题和全角背景（红色）块的红色三角形？我需要剪掉三角形以露出底层照片。

标题效果很好，但只要全宽红色块应用于包含标题的背景图层，它就会填充＆＃34;三角形切口。

更新

我在flexbox中创建了一个flexbox。不幸的是，包含的标题不完全是1200px，这很难应用于整体布局。

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

问题太多：
让我试着回答我所理解的那些。 我会继续编辑这个答案：

1. 到包含：您可以拥有以下父div

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

这样一个孩子的红色div，不会出现在父母的约束之外。

1. 您可以将css- 三角形视为：

.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>

p.s：你的codepen远远落后于有问题的布局，很难动手修复问题

Answer 2

您可以使用：before和：after伪元素在白色标题的每一侧创建红色元素，而不是将其从背景中剪切出来，您可以创建背景的幻觉。

在http://codepen.io/anon/pen/MyNpdX中，我添加了以下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 3

将包含的flexbox标题放在另一个弹性框内。

在标题左侧放置一个（红色）块，在右侧放置一个（红色）块。

为白色标题创建最大宽度：

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

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