纯CSS写的各种小三角和小箭头
2024-10-07 08:46:36
头朝下的小三角
width:0;
height:0;
border:50px solid transparent; //所有border都是透明的,
border-top-color:black; //只有尖相对的方向border有颜色
同理,头朝上的小三角,只要把border-top-color改成border-bottom-color就可以啦
头朝上的小三角
聪明的你,肯定就知道头朝左的小三角是border-right-color,头朝右的小三角是border-left-corder了,那我就不再多说啦
根据这种小三角我们也很容易写出向上、下、左、右的箭头,下面我就写一个头朝下的箭头
<div class="jiantou"></div>
.jiantou{
width: 14px;
height: 14px;
border-top: 5px solid #333;
border-right: 5px solid #333;
transform: rotate(45deg);
}
原理很简单,主要是border控制箭头的方向和宽度,width和height要一样大箭头才会对称效果如图:
向右的小箭头
同理,其他方向的小箭头就都能写出来啦。
还有就是小旗子,也是可以根据上面说到的小三角写出来,只要把border和border-top-color的颜色值换一下,不显示哪里哪里就是透明色,显示的额地方就是你想要的颜色
width: 0;
height: 0;
border: 30px solid black;
border-bottom-color: transparent;
效果如图:
还有就是四个角的小三角:左上角,左下角,右上角,右下角
左上角的小三角
width:0;
height:0;
border-left:50px solide transparent;
border-bottom:50px solide black;
右下角的小三角
width:0;
height:0;
border-right:50px solide transparent;
border-top:50px solide black;
其实我觉得记着、这些没啥用,然后就找到了规律
小三角在上边就有border-top,在下边就有border-bottom,左右都是相对的
还有左右方向一直是透明颜色,上下相对的一方是你想要的颜色
咋样?也可能我说的不够清楚,反正呢,就互相学习吧
最新文章
- MySql: 查看当前登录用户,当前数据库
- 【转】2016/2017 Web 开发者路线图
- (python)对象的引用
- 【Alpha阶段】第7.5次Scrum例会
- Remote Desktop Connection Manager 多个远程管理
- c# Random太快产生的随机数会重复
- perl的安装和版本切换工具-perlbrew
- 《Java从入门到放弃》JavaSE入门篇:面向对象概念(入门版)
- Android 实现UI设计
- webpack 4.X 基础编译
- django如何查看mysql已有数据库中已有表格
- ios不触发事件也能播放音频
- Nginx系列4:用GoAccess实现可视化并实时监控access日志
- Windows系统编程之异步I/O和完成端口
- [No0000134]C#中的委托,匿名方法和Lambda表达式
- TM-align TM-score安装
- 逆袭之旅DAY24.XIA.二重进阶、双色球
- UPF Usage
- JAVA设计模式——第 4 章 多例模式【Multition Pattern】(转)
- C#类头部声明样式