介绍
接下来我将为大家介绍CSS里各种小三角的制作,希望大家多多点赞支持一下
比如说这种:
还有这种:
以及这种:
代码及实现
第一种
第一种是比较简单的一种,有着比较固定的写法
<div class="app">
下载app
</div>
*{
margin: 0;
padding: 0;
}
.app{
position: relative;
width: 100px;
height: 30px;
background-color: aqua;
text-align: center;
vertical-align: middle;
}
.app::after{
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border: 8px solid transparent;
border-top: none;
border-bottom-color: #fff;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
这里的逻辑是:
- 设置一个盒子宽高都为0,然后只设置边框大小
- 这里边框颜色全部设置为透明
- 接下来就考虑你要的三角形的朝向
上面代码是这种:
如果将参数改成这样:
border-right: none;
border-left-color: #fff;
就成了这样:
其他的同理!!
第二种
这种是第一种的升级版,实现原理是用一个小的来覆盖掉大的颜色
<div class="fi">
<div class="left"></div>
<div class="right">
<div class="arrow1"></div>
<div class="arrow2"></div>
</div>
</div>
*{
margin: 0;
padding: 0;
}
.fi{
display: flex;
width: 200px;
height: 50px;
background-color: #187df1;
}
.left{
width: 100px;
height: 50px;
border-right: 1px solid aquamarine;
}
.right{
position: relative;
width: 100px;
height: 50px;
background-color: aquamarine;
}
.arrow1{
position: absolute;
width: 0;
height: 0;
top: 50%;
transform: translateY(-50%);
border: 8px solid transparent;
border-right: none;
border-left-color: #fff;
}```
一开始先是这样子的:
![3](https://img-blog.csdnimg.cn/20210524192901325.png)
在加个覆盖的代码:
```css
.arrow2{
position: absolute;
width: 0;
height: 0;
top: 50%;
transform: translateY(-50%);
border: 7px solid transparent;
border-right: none;
border-left-color: aquamarine;
}
第三种
这个就是第一种的变形,这里的原理是对不同边设置不同长度
<div class="box"></div>
.box{
width:0;
height:0;
border-color:transparent red transparent transparent;
border-style:solid;
border-width:22px 8px 0 0;
/*不同的是这里设置不同的宽度!!!!*/
}
结尾
大概我能想到的小三角就只有着三种,如果大家看完文章有所收获,麻烦帮我点下赞!salute!!!