css - 当 div 嵌套时，在 div 底部放置一个三 Angular 形等

Question

我正在尝试使用 this effect that positions a triangle at the bottom of a div在下面的代码块上，但我不确定是因为嵌套的 div 还是 section 标签，我无法让它工作。

这就是我想要实现的目标:(这是我模拟的 PNG)

但是，我目前看到这个(jsfiddle 链接):

http://jsfiddle.net/hTp6y/

HTML:

<div class="entry-content">
    <section class="vc_section_wrapper has_bg_color">
        <div class="bg-layer" style="background-color: rgb(114, 114, 255); height: 347px;" data-inertia="0.1">
        </div>
        <div class="wpb_row row-fluid">
            <div class="span12 wpb_column column_container">
                <div class="wpb_wrapper">
                    <div class="wpb_text_column wpb_content_element ">
                        <div class="wpb_wrapper">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec odio ac lectus mattis pellentesque vel eu erat. Aliquam a libero non quam molestie interdum in ut urna.</p>
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div>
    </section>
    <section class="vc_section_wrapper has_bg_color">
        <div class="bg-layer" style="background-color: rgb(158, 27, 52); height: 227px;" data-inertia="0.1">
        </div>
        <div class="wpb_row row-fluid">
            <div class="span12 wpb_column column_container">
                <div class="wpb_wrapper">
                    <div class="wpb_text_column wpb_content_element ">
                        <div class="wpb_wrapper">
                            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. In varius posuere elit, nec ultrices ligula posuere in. Vestibulum ut sollicitudin eros, et vestibulum magna. .</p>
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div>
    </section>
</div>

CSS:

.vc_section_wrapper .bg-layer {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0;
}

.vc_section_wrapper.has_bg_color > .wpb_row, .vc_section_wrapper.has_bg_img > .wpb_row { 
    padding-top: 40px;  
    position: relative;
}

.triangle-down{
    width: 2.5%;
    height: 0;
    padding-left:2.5%;
    padding-top: 2.5%;
    overflow: hidden;
    position: absolute;
    left:0;right:0;
    margin:auto;
    top: 100px;
    z-index:1;
}
.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-50px;
    margin-top:-50px;

    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid pink;
}

我不知道这是否只是一个 CSS 更改，我怀疑我是否将这行代码放在了正确的位置:

<div class="triangle-down"></div>

Answer 1

你可以在这里替换它:

<div class="bg-layer" style="background-color: rgb(158, 27, 52); height: 227px;" data-inertia="0.1">
  <div class="triangle-down"></div>
</div>

并在 triangle-down 类中将 top:100% 重写为 top:0。

http://jsfiddle.net/hTp6y/1/