读《高效前端》整理-----HTML/CSS优化-----用css画三角形

最新推荐文章于 2025-02-06 17:52:17 发布

原创最新推荐文章于 2025-02-06 17:52:17 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

读高效前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用CSS边框属性创建各种三角形效果，包括基础三角形的生成、带边框的三角形、配以盒子的三角形及阴影效果。通过调整边框颜色和透明度，展示了不同方向三角形的制作方法。

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>