css代码画三角形箭头(上下左右)

2869 ℃

三角形箭头是我们前端比较常用的图形,那么如何用css代码绘制不同方向的三角形箭头呢?下面web建站小编带大家了解一下实现代码!

向下三角形箭头

span::after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
	border: 6px solid #fff; //白色
	border-top-color: #fff;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
}

向上三角形箭头

span::after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
	border: 6px solid #fff; //白色
	border-top-color: transparent;
	border-bottom-color: #fff;
	border-left-color: transparent;
	border-right-color: transparent;
}

向左三角形箭头

span::after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
	border: 6px solid #fff; //白色
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: #fff;
}

向右三角形箭头

span::after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
	border: 6px solid #fff; //白色
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: #fff;
	border-right-color: transparent;
}

css美化input-checkbox多选框代码

css如何画三角形

利用css3做一个动态炫彩三角边框(结合clip-path+animation)

使织梦DedeCMS默认编辑器变成所见即所得的方法

帝国cms功能之如何实现当前信息页高亮功能

标签: css代码, 三角形, 三角形箭头

上面是“css代码画三角形箭头(上下左右)”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_2643.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

生活小工具

收录了万年历、老黄历、八字智能排盘等100+款小工具!生活小工具
vue语法中关于mixin的使用方法
织梦cms未审核的文章如何实现仅发布者可见
织梦DedeCMS最新版(20180109)任意用户密码修改
php如何利用header实现跳转
php各种日期时间代码介绍