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

不二如是

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

重点介绍更多的玩法

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

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

其他代码不变。

1.        article::after{
   
2.             content: '';
   
3.             position: absolute;
   
4.             width:0;
   
5.             height: 0;
   
6. 
   
7.             border-width: 20px;
   
8.             border-style: solid;
   
9.             left: -33px;
   
10.             top: 33px;
    
11.             border-color: transparent #000 transparent transparent;
    
12.         }

复制代码

效果图：

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

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

复制代码

效果图：

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

1. border-width: 6px;
   
2.             left:100px;
   
3.             top:50px ;
   
4.             border-color: transparent transparent transparent #6FF;

复制代码

效果图：

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

1.     article::after{
   
2.             content: '';
   
3.             position: absolute;
   
4.             width:0;
   
5.             height: 0;
   
6.             border-style: solid;
   
7. 
   
8.             border-width: 6px;
   
9.             left:228px;
   
10.             bottom:5px ;
    
11.             border-color: transparent transparent transparent #6FF;
    
12.         }
    
13.         article::before{
    
14.             content: '';
    
15.             position: absolute;
    
16.             width: 0;
    
17.             height: 0;
    
18.             border-style: solid;
    
19. 
    
20.             border-width:6px;
    
21.             border-color: transparent #6FF transparent transparent;
    
22.             bottom: 5px;
    
23.             right: 228px;
    
24.         }

复制代码

还可以合并写：

1. article::after,article::before{
   
2.             content: '';
   
3.             position: absolute;
   
4.             width:0;
   
5.             height: 0;
   
6.             border-style: solid;
   
7.             border-width: 6px;
   
8.             bottom:5px ;
   
9.         }
   
10.         article::after{
    
11.             left:228px;
    
12.             border-color: transparent transparent transparent #6FF;
    
13.         }
    
14.         article::before{
    
15.             border-color: transparent #6FF transparent transparent;
    
16.             right: 228px;
    
17.         }

复制代码

效果图：

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

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

多么有激情的三角！

1.        article::after,article::before{
   
2.             content: '';
   
3.             position: absolute;
   
4.             width:0;
   
5.             height: 0;
   
6.             border-style: solid;
   
7.             border-width: 10px;
   
8.             bottom:5px ;
   
9.             right:20px;
   
10.             border-color: transparent transparent transparent deeppink;
    
11.         }
    
12. 
    
13.         article::after{
    
14.             right:25px;
    
15.             border-color: transparent transparent transparent #000;
    
16.         }
    

复制代码

效果图：

充分说明一件事：

障眼法，屡试不爽！

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

官方 Web 课程：

dreamdnj

学到很多，很巧妙

aswyamato1989

继续学习，非常不错！

aswyamato1989

交作业！

睁眼睡大觉

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