元素两侧的响应三角形

Question

我有一个项目，其中将有两个三角形，每边一个，如下图所示，我有困难，首先，让每一个都在正确的一面，我一直在尝试使用浮动但是它没有用。

然后使它们与白色区域对齐，而不管屏幕尺寸如何，即响应。

＆＃13;

＆＃13;

#anim {
  position: relative;
  height: 100%;
  min-height: 100%;
  background-image: url("http://i.imgur.com/rxks29H.jpg");
  background-image: no-repeat;
  background-size: 100%;
}
#anim img {
  position: relative;
  height: 100%;
  width: 100%;
}
.arrow-left {
  position: absolute;
  width: 0;
  height: 0;
  width: 200px;
  border-top: 200px solid transparent;
  border-bottom: 200px solid transparent;
  z-index: 3;
  top: 30%;
  border-left: 200px solid green;
}
.arrow-right {
  position: absolute;
  width: 200px;
  float: right;
  z-index: 3;
  border-top: 200px solid transparent;
  border-bottom: 200px solid transparent;
  top: 30%;
  border-right: 200px solid blue;
}

＆＃13;

<section id="anim">
  <img src="http://i.imgur.com/ucQ3ZXl.png">


  <div class="arrow-right">
  </div>
  <div class="arrow-left">
  </div>


</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么不将箭头视为背景图像的一部分，以确保无论屏幕尺寸如何，它都始终存在，然后每个箭头中的内容可以定位在顶部a如果它移动一点就不会破坏背景本身。我很快就创建了背景来说明我的意思，如果需要，可以自己重新创建图像。

将文本放在每个箭头中，将CSS更改为：

float: left或float: right不能与position: absolute一起使用，您需要使用left和right属性。

#anim {
  position: relative;
  height: 100%;
  min-height: 100%;
  background-image: url("http://i.imgur.com/rxks29H.jpg");
  background-image: no-repeat;
  background-size: 100%;
}
#anim img {
  position: relative;
  height: 100%;
  width: 100%;
}
.arrow-left {
  padding: 2.5% 15px;
  text-transform: uppercase;
  position: absolute;
  width: 13%;
  left: 0;
  z-index: 3;
  top: 36%;
}
.arrow-right {
  padding: 2.5% 15px;
  text-transform: uppercase;
  position: absolute;
  width: 13%;
  right: 0;
  z-index: 3;
  top: 36%;
}
.arrow-right h2 {
  font-size: 28px;
  color: #FFF;
}
.arrow-left h2 {
  font-size: 28px;
  color: #FFF;
}

<section id="anim">
  <img src="http://i.stack.imgur.com/Fbhc4.png">
  <div class="arrow-right">
    <h2>Scouting For Companies</h2>
  </div>
  <div class="arrow-left">
    <h2>Seeking For Ideas</h2>
  </div>


</section>

如果要使网站响应，您需要为较小的屏幕添加一些规则，而对于较大的屏幕则需要添加一些规则。

** 修改 **

我添加动画非常快，只是为了说明你需要做什么，并给你一个良好的开端 这是JSFIDDLE。