CSS利用边框实现三角形详解(上)

利用CSS边框实现三角形，以及进阶技巧

秃头小鱼

7455人浏览 · 2022-01-02 00:43:41

秃头小鱼 · 2022-01-02 00:43:41 发布

此篇文章介绍CSS利用边框实现正三角形以及具体应用，所有代码在最后附上。

前言

最近在学 HTML CSS，关于 CSS 边框实现三角形的原理和进阶技巧进行一些说明，希望对大家有些许帮助

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS 边框实现三角形原理

盒子模型由外边距、边框、内边距、内容，四部分组成，边框 border 本身就是一个梯形，下底由你设置的 border-width 决定，上底由盒子的内容来决定。

.box1 {
            /* 盒子内容宽高 */
            width: 30px;
            height: 30px;
            border-color: red green blue gray;
            border-style: solid;
            /* 盒子边框的宽度 */
            border-width: 50px;
        }

当我们将内容设置为0的时候，这时候边框就是充满盒子，并且每个边框都是一个三角形。我们想要的三角形就得到了，此时只需要设置相应边框为透明色，将其在视觉上隐藏起来，就可以得到我们需要的特定方向的三角形了。

.box {
            width: 0;
            height: 0;
            /* 考虑一些低版本浏览器的兼容性问题 */
            line-height: 0;
            font-size: 0;
            /* 当盒子宽高都是0，设置边框的时候，盒子由边框组成 */
            border-color: red green blue gray;
            border-style: solid;
            border-width: 50px;
        }

这时候我们只需要隐藏三个边框的颜色就可以得到想要的三角形了，注意隐藏是边框颜色，不是设置宽度为0。

.box {
            width: 0;
            height: 0;
            /* 考虑一些低版本浏览器的兼容性问题 */
            line-height: 0;
            font-size: 0;
            /* 先给四个边框设置颜色为透明色，需要哪个方向的边框，再单独设置哪个边框的颜色即可 */
            border: 50px solid transparent;
            /* 朝右的三角形 */
            border-left-color: gray;
            
}

其余方向的三角形也是同理的。

二、进阶技巧：定位与CSS三角联合使用

使用定位和CSS三角就可以制作网站上常见的样式

首先我们可以准备一个盒子 div，里面放一个 span 用作制作三角形，通过使用子绝父相，就可以实现类似的样式。废话不多说，直接上代码：

        /* 这是部分代码，全部代码放在最后 */
        <div class="tb">
            <span></span>
        </div>    
        
        /* CSS 部分 */
        .tb {
            /* 子绝父相，让三角形盒子相对于父元素定位 */
            position: relative;
            width: 300px;
            height: 180px;
            background-color: palegreen;
        }
        .tb span {
            /* 右三角，使用子绝父相制作，移动到盒子边上即可 */
            position: absolute;
            top: 15px;
            /* 我们只是在视觉上将另外三个边框隐藏掉了，盒子的大小仍然是边框宽度的2倍 */
            right: -20px;
            width: 0;
            height: 0;
            border: 10px solid transparent;           
            border-left-color: palegreen;
        }

最终，我们就可以得到下面的效果图：

总结

以上就是自己的理解，欢迎指正。下面将全部代码奉上，直接复制下来新建一个.html文件就可以使用啦。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>204-CSS三角制作</title>
    <style>
        h3 {
            font-weight: 400;
        }
        
        .box {
            width: 0;
            height: 0;
            /* 考虑一些低版本浏览器的兼容性问题 */
            line-height: 0;
            font-size: 0;
            /* 当盒子宽高都是0，设置边框的时候，盒子由边框组成 */
            border-color: red green blue gray;
            border-style: solid;
            border-width: 50px;
        }

        .box1 {
            /* 必须设置盒子的宽高都是0 */
            width: 0;
            height: 0;
            /* 先给四个边框设置颜色为透明色，需要哪个方向的边框，再单独设置哪个边框的颜色即可 */
            border: 50px solid transparent;
        }

        .top {
            border-bottom-color: red;
        }

        .bottom {
            border-top-color: red;
        }

        .left {
            border-right-color: red;
        }

        .right {
            border-left-color: red;
        }
        /* ----------------------------------------------------------------- */
        .tb {
            position: relative;
            width: 300px;
            height: 180px;
            background-color: palegreen;
        }
        .tb span {
            position: absolute;
            top: 15px;
            right: -20px;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            /* 右三角，使用子绝父相制作，移动到盒子边上即可 */
            border-left-color: palegreen;
        }

        .jd {
            position: relative;
            width: 180px;
            height: 300px;
            background-color: skyblue;
        }
        .jd span {
            position: absolute;
            top: -20px;
            right: 15px;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom-color: skyblue;
        }
    </style>
</head>
<body>
    <h3>1. CSS三角形制作的原理</h3>
    <div class="box"></div>
    <h3>2. 上三角制作</h3>
    <div class="box1 top"></div>
    <h3>3. 下三角制作</h3>
    <div class="box1 bottom"></div>
    <h3>4. 左三角制作</h3>
    <div class="box1 left"></div>
    <h3>5. 右三角制作</h3>
    <div class="box1 right"></div>
    <h3>6. 淘宝三角制作</h3>
    <div class="tb">
        <span></span>
    </div>
    <h3>7. 京东三角制作</h3>
    <div class="jd">
        <span></span>
    </div>
</html>