不二如是 发表于 2017-3-11 14:14:33

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

本帖最后由 不二如是 于 2021-8-11 11:06 编辑

继续在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;
      }

效果图：


充分说明一件事：

障眼法，屡试不爽！

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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

dreamdnj 发表于 2017-5-1 17:57:50

学到很多，很巧妙

aswyamato1989 发表于 2017-8-7 23:22:05

继续学习，非常不错！

aswyamato1989 发表于 2017-8-7 23:30:45

交作业！

睁眼睡大觉 发表于 2019-3-29 14:24:35

好骚啊 哈哈 这操作 不过好喜欢
页: [1]
查看完整版本: 0 0 7 1 - 更高B格的“小三角” | 【画龙点睛】