img覆蓋修改插入符號

我有一個簡單的容器，在底部附加了一個三角形脫字符。img覆蓋修改插入符號

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

我的家庭股份有一個形象，我需要該圖像擴展在插入符號，但只在那裏。

給它看看 - >Bootply。

我嘗試了很多東西，我錯過了一些東西。我甚至認爲我的方法很糟糕。基本上我想要做的是，只需在底部中間添加該三角形，並將圖像疊加在上面。

基本上它是這樣的：

enter image description here

來源

2014-02-27 The Mini John

我看到2種方式去：

重用的主要DIV圖像中插入符號

1A。將其設置/定位在邊框圖像中

1b。切出的主要圖像的部分透明部分，並使用該塑造你插入符號
從主DIV

2a中創建用於插入符的切口。在主div內添加div，在其底部，因此它們覆蓋圖像的一部分

2b。使圖像中的透明切口，在底部

回答1A/2A與八字與CSS設置完成後，圖1b/2b的可自動使用服務器端代碼來完成（ASP/PHP）

來源

2014-02-27 07:53:13 LGSon

img覆蓋修改插入符號

回答

相關問題