ife系列之网页页面“小三角”的实现方式

最新推荐文章于 2023-10-14 23:41:33 发布

微光瞬间

最新推荐文章于 2023-10-14 23:41:33 发布

阅读量903

点赞数

CC 4.0 BY-SA版权

分类专栏：百度ife前端学习

本文链接：https://blog.youkuaiyun.com/qq_31782957/article/details/65638132

百度ife前端学习专栏收录该内容

4 篇文章

订阅专栏

本文介绍了三种创建网页中“小三角”的方法：实心小三角通过设置伪元素的border实现，空心小三角则利用两个伪元素覆盖或小正方形旋转实现。这些都是网页设计中的小技巧，适合开发者收藏学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题引出：
　　最近在写ife作业的时候，边写边查资料，查着查着就偏题了，看到一个网页中的“小三角”很好看（很不好意思，那个网页地址给忘了），不自觉的按下F12，看看有没有源码可以借鉴一下，很简单地就找到了，哈哈，很开森。对了，实现的效果大致如下图：网页小三角实现方式
　　

针对上面的效果，本人目前有三种实现方式（相信还有其他好的实现方式），下面一一介绍：
　　1）第一种方式(“实心小三角”)：
　　此种方式主要是将宽高全置为0，通过设置伪元素的border样式来实现的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>有趣的小三角实现方式</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .dv1{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 300px;
            height: 300px;
            background: #FFF;
            box-sizing: border-box;
            border: 1px solid #CCC;
        }
        .dv1::after{
            content: "";
            width: 0;
            height: 0;
            display: inline-block;
            /*默认将其他边框样式全部变为透明样式*/
            border: 11px solid transparent;
            /*只留"三角形箭头"指向的那一部分*/
            border-bottom: 11px solid #CCC;
            position: absolute;
            left: 0px;
            top: -23px;
        }
    </style>
</head>
<body>
    <div class="dv1"></div>
</body>
</html>

其实此种方式很好理解，下面是自己画的示意图，可以参考参考：
透明边框示意图
我们将边框设置为border：11px solid transparent; 同时又只设置border-bottom: 11px solid #CCC; 的样式，这样就可以实现“三角”的样式了。但是缺陷就是只能是实心的，不能设置空心的，可能有些时候也需要这样的样式，不管了，就这样吧。
　　2）第二种方式（“空心小三角”）：
　　通过参考上述设置边框样式的方法，同时设置两个这样的伪元素，一白一灰，将白色的覆盖在灰色的上面就可以了，但是要注意，把灰色的样式设置宽一点，为了能显示出来“三角”的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>有趣的小三角实现方式</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .dv1{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 300px;
            height: 300px;
            background: #FFF;
            box-sizing: border-box;
            border: 1px solid #CCC;
        }
        .dv1::before{
            content: "";
            width: 0;
            height: 0;
            display: block;
            /*默认将其他边框样式全部变为透明样式*/
            border: 13px solid transparent;
            /*只留"三角形箭头"指向的那一部分*/
            border-bottom: 13px solid #FFF;
            position: absolute;
            left: 8px;
            top: -23px;
            z-index: 11;
        }
        .dv1::after{
            content: "";
            width: 0;
            height: 0;
            display: block;
            /*默认将其他边框样式全部变为透明样式*/
            border: 11px solid transparent;
            /*只留"三角形箭头"指向的那一部分*/
            border-bottom: 11px solid #CCC;
            position: absolute;
            left: 10px;
            top: -23px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="dv1"></div>
</body>
</html>

　　3）第三种方式（“空心小三角”）：
　　与上面实现的方式大致类似，这里主要是利用小正方形旋转得到的，然后也是将白色的小方块覆盖到灰色的小方块上面，但是也要注意，把灰色的样式设置宽一点，为了能显示出来“三角”的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>有趣的小三角实现方式</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .dv1{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 300px;
            height: 300px;
            background: #FFF;
            box-sizing: border-box;
            border: 1px solid #CCC;
            z-index: 10;
        }
        .dv1::before, .dv1::after{
            content: "";
            width: 15px;
            height: 15px;
            background: #FFF;
            display: block;
            position: absolute;
            left: 10px;
            top: -6px;
            /*添加伪元素，并将小方块旋转45度得到*/
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);; 
            transform: rotate(45deg);
            z-index: 11;
        }
        .dv1::after{
            background: #CCC;   
            top: -8px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="dv1"></div>
</body>
</html>