css3实现小箭头，各种图形

最新推荐文章于 2024-08-01 13:41:00 发布

gs981600308

最新推荐文章于 2024-08-01 13:41:00 发布

阅读量1w

点赞数 2

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/gs981600308/article/details/89178068

版权

使用CSS3可以直接创建各种图形，如小箭头，不再需要依赖切图。文章介绍了如何用CSS3实现不同方向的小箭头，强调了transparent在CSS中的应用，并给出了制作向下箭头的技巧。此外，还提到了用CSS3绘制心形的方法。

摘要由CSDN通过智能技术生成

css实现各种图形真是太赞了，再也不用切图了，直接用css就可以实现。

最常用的就是用css实现的小三角了

在这里插入图片描述

#triangle-up{
	display:inline-block;
	width:0;
	height:0;
	border-left:30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom:50px solid red;}
#triangle-down {
	display:inline-block;
	width:0;
	height:0;
	border-left:30px solid transparent;
	border-right: 30px solid transparent;
	border-top:50px solid red;}
#triangle-left {
	display:inline-block;
	width:0;
	height:0;
	border-top: 30px solid transparent;
	border-right: 50px solid red;
	border-bottom: 30px solid transparent;}
#triangle-right{
	display:inline-block;
	width:0;
	height:0;
	border-top: 30px solid transparent;
	border-left: 50px solid red;
	border-bottom: 30px solid transparent;}