Question

我正在项目中使用ZURB Foundation 5。我想编写类似于this !的设计。标题和内容很清楚，但我不知道如何使用蓝色三角形背景编码h1-tag标题。背景从浏览器的最左侧开始，应该在图像中显示的12列中的9列之后结束。到目前为止，这是我的代码：

HTML 的

<div id="title">
    <div class="row">
        <div class="large-8 columns"><h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam nulla</h1></div>
    </div>
</div>

CSS

#title {
    position:relative;
    vertical-align:middle;
    height:250px;
}

#title h1 {
    vertical-align:middle;
    display:table-cell;
    height:250px;
}

#title:before, #title:after {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

#title:before {
    background: green;
    left: 0;
    width:60%;      
}

#title:after {
    background: grey;
    right: 0;
    width:40%;
    border-top: 250px solid white;
    border-left: 105px solid green;    
}

小提琴：https://jsfiddle.net/zttr/hgp3grsz/

如何在12列中的9列之后设置三角形是否正常结束？

使用全宽三角背景与zurb基础

0 个答案: