发表于 | 分类于 
1
2
3
4
5
6
7
8
<div class="box">
    <nav class="left">
        <h3>导航1</h3>
    </nav>
    <section>
        <div class="module"></div>
    </section>
</div>
1
2
3
4
5
6
7
8
.box{
    border-left:300px solid #222;
}
.left{
    width:300px;
    margin-left:-300px;
    float:left;
}

reference:http://www.imooc.com/video/13378
测试了上面的代码，发现没有实现等高布局。

发表于 | 分类于

利用border构建三角形

方案一

1
2
3
4
5
6
.triangle{
    border-width:12px 20px;
    border-style:solid;
    border-color:red red transparent transparent;
    font-size:0;
}
1
<a href="" class="triangle"></a>//要使用行内元素

方案二

1
2
3
4
5
6
7
.triangle{
    width:0px;
    height:0px;
    border-width:100px;
    border-style:solid;
    border-color:red transparent transparent transparent;
}
1
<div class="triangle></div>