使用img overlay修改Caret

Question

我有一个简单的容器，底部附有一个三角形插入符号。

<div class="home" id="hero">
  <div class="container">
    <h1 class="hero-text">
      Welcome to the <br>
      Lorem Ipsum Akinator
    </h1>
    <p class="sub-text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
    </p>
    <div class="home_sign_up">
    </div>
    <div class="img"></div>
  </div>
</div>
<div class="arrow-down"></div> <!-- CARET -->

我的家庭div有一个图像，我需要将图像扩展到插入符号上，但只在那里。

看一看 - ＆gt; Bootply

我尝试了很多东西，我错过了一些东西。 我甚至认为我的做法很糟糕。基本上我要做的是，只需在底部中间添加三角形，图像覆盖它。

基本上就是这样：

Answer 1

我看到了两种方法：

1. 重用插入符号中的主div图像

   1a上。将其设置/放置在边框图像

   中

   1b中。剪出主图像的部分透明部分并使用它    塑造你的插入符号

2. 从主要div创建插入符号的剪切

   2a上。在主div中添加div，在底部，因此它们覆盖图像的一部分

   2B。在图像中制作透明切口，底部有一个插入符号

答案1a / 2a使用css设置完成，1b / 2b可以使用服务器端代码（ASP / PHP）自动完成