1,先看一下border的样子
<style>
.borderDemo .triangle {
border-right: 50px solid #333;
border-left: 50px solid #000;
border-top: 50px solid #666;
border-bottom: 50px solid #999;
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
<section class="borderDemo">
<h2>borderDemo</h2>
<div class="triangle"></div>
<hr>
</section>
2,去掉content部分
<style>
.borderDemo2 .triangle {
border-right: 50px solid #333;
border-left: 50px solid #000;
border-top: 50px solid #666;
border-bottom: 50px solid #999;
width: 0px;
height: 0px;
}
</style>
<section class="borderDemo2">
<h2>borderDemo2</h2>
<p>上面content的 width和height 改为0</p>
<div class="triangle"></div>
<p>在目前的基础上,4个方向基本成型</p>
<hr>
</section>
3,去掉border-top
<style>
.borderDemo3 .triangle {
border-right: 50px solid #333;
border-left: 50px solid #000;
/* border-top: 50px solid #666; */
border-bottom: 50px solid #999;
width: 0px;
height: 0px;
}
</style>
<section class="borderDemo3">
<h2>去掉border-top</h2>
<div class="triangle"></div>
<hr>
</section>
4,成型
<style>
.borderDemo4 .triangle {
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid #999;
width: 0px;
height: 0px;
}
</style>
<section class="borderDemo4">
<h2>成型</h2>
<h2>border-left 和 border-right 改变颜色为 transparent</h2>
<div class="triangle"></div>
<hr>
</section>
5,全家福
<style>
.borderDemo5 .box {
display: flex;
}
.borderDemo5 .triangle {
width: 0px;
height: 0px;
margin: 0 30px;
}
.borderDemo5 .left {
border-right: 50px solid #333;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.borderDemo5 .right {
border-left: 50px solid #000;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.borderDemo5 .bottom {
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-top: 50px solid #666;
}
</style>
<section class="borderDemo5">
<h2>全家福</h2>
<div class="box">
<div class="triangle left"></div>
<div class="triangle right"></div>
<div class="triangle bottom"></div>
</div>
<hr>
</section>
6,带边框
<style>
.borderDemo6 .triangle {
position: relative;
border-right: 50px solid #333;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
width: 0px;
height: 0px;
}
.borderDemo6 .triangle:before {
position: absolute;
top: -50px;
left: 10px;
border-right: 50px solid #fff;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
content: ''
}
</style>
<section class="borderDemo6">
<h2>带边框</h2>
<h2>本质就是再造一个,把下面的盖住。其中本体relative。再造absolute</h2>
<div class="triangle"></div>
<hr>
</section>
7,带边框,加上盒子
<style>
.borderDemo7 .triangle {
margin-left: 30px;
width: 300px;
height: 80px;
border: 1px solid #ccc;
position: relative;
}
.borderDemo7 .triangle:before,
.borderDemo7 .triangle:after {
position: absolute;
top: 34px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
content: ''
}
.borderDemo7 .triangle:before {
left: -10px;
border-right: 10px solid #ccc;
}
.borderDemo7 .triangle:after {
left: -8px;
border-right: 10px solid #fff;
}
</style>
<section class="borderDemo7">
<h2>带边框 并且配上盒子</h2>
<h2>盒子是本体,底层三角是before,顶层三角是after,上下两层都是absolute,底层确定了位置,顶层只要改动left即可。</h2>
<div class="triangle"></div>
<hr>
</section>
8,加上阴影
<style>
.borderDemo8 .triangle {
margin-left: 30px;
width: 300px;
height: 80px;
border: 1px solid #ccc;
position: relative;
filter: drop-shadow(0 0 2px #999);
background:#fff;
}
.borderDemo8 .triangle:before,
.borderDemo8 .triangle:after {
position: absolute;
top: 34px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
content: ''
}
.borderDemo8 .triangle:before {
left: -10px;
border-right: 10px solid #ccc;
}
.borderDemo8 .triangle:after {
left: -8px;
border-right: 10px solid #fff;
}
</style>
<section class="borderDemo8">
<h2>加上阴影</h2>
<h2>只需要在盒子上加上 filter:drop-shadow(0 0 2px #999)</h2>
<div class="triangle"></div>
<hr>
</section>