0 0 7 1 - 更高B格的“小三角” | 【画龙点睛】

不二如是

继续在70基础上修改代码，所以关于分割三角的方法略过不表。

重点介绍更多的玩法

通过隐藏的方式，就是相应位置设置为transparent即可。

例如我们想要一个朝左的三角，只需保留border-color第二个位置的值。

其他代码不变。

       article::after{
            content: '';
            position: absolute;
            width:0;
            height: 0;

            border-width: 20px;
            border-style: solid;
            left: -33px;
            top: 33px;
            border-color: transparent #000 transparent transparent;
        }

效果图：

同理，还可以把这个三角移到右边，形成缺口效果

 right: -3px;
            top: 33px;
            border-color: transparent #6FF transparent transparent;

效果图：

还可以缩小border-width，放在页面内作为点缀

 border-width: 6px;
            left:100px;
            top:50px ;
            border-color: transparent transparent transparent #6FF;

效果图：

还可以设置before，引入带有翻页的效果

    article::after{
            content: '';
            position: absolute;
            width:0;
            height: 0;
            border-style: solid;

            border-width: 6px;
            left:228px;
            bottom:5px ;
            border-color: transparent transparent transparent #6FF;
        }
        article::before{
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;

            border-width:6px;
            border-color: transparent #6FF transparent transparent;
            bottom: 5px;
            right: 228px;
        }

还可以合并写：

article::after,article::before{
            content: '';
            position: absolute;
            width:0;
            height: 0;
            border-style: solid;
            border-width: 6px;
            bottom:5px ;
        }
        article::after{
            left:228px;
            border-color: transparent transparent transparent #6FF;
        }
        article::before{
            border-color: transparent #6FF transparent transparent;
            right: 228px;
        }

效果图：

在有创意些，比如一个很流行的线型三角

很简单只要afrer的，骑到before上面，然后设置成背景色，就可以了

多么有激情的三角！

       article::after,article::before{
            content: '';
            position: absolute;
            width:0;
            height: 0;
            border-style: solid;
            border-width: 10px;
            bottom:5px ;
            right:20px;
            border-color: transparent transparent transparent deeppink;
        }

        article::after{
            right:25px;
            border-color: transparent transparent transparent #000;
        }

效果图：

充分说明一件事：

障眼法，屡试不爽！

这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅 ）

官方 Web 课程：

dreamdnj

学到很多，很巧妙

aswyamato1989

继续学习，非常不错！

aswyamato1989

交作业！

睁眼睡大觉

好骚啊 哈哈 这操作 不过好喜欢