CSS绘制三角形图标

最新推荐文章于 2023-04-11 10:00:22 发布

2019camila

最新推荐文章于 2023-04-11 10:00:22 发布

阅读量1.5k

点赞数

分类专栏： web组件排版 CSS

本文链接：https://blog.csdn.net/weixin_45884768/article/details/103399415

版权

web组件排版同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

CSS绘制三角形图标目录

1CSS绘制三解形图标原理
2 页面效果
3 HTML结构
4 CSS样式

1CSS绘制三解形图标原理

对内容容器进行相对定位，对内容容器的伪元素:before和:after进行绝对定位，设置top、right、bottom、left来控制三角形的绘制位置，设置伪元素:before和:after的宽高均为0，并定义上右下左边框样式，此时上右下左的边框线变成了4个三角形，通过设置某些边的边框颜色透明实现三角形隐藏，从而实现三角形图标的绘制。

2 页面效果

在这里插入图片描述

3 HTML结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS绘制三角形图标</title>	
		<link rel="stylesheet" href="css/triangle.css" />		
	</head>
	<body>	
		<div class="wrap">
			<span class="icon-triangle-all"></span>
			<span class="icon-triangle-top"></span>
			<span class="icon-triangle-right"></span>
			<span class="icon-triangle-bottom"></span>
			<span class="icon-triangle-left"></span>		
		</div>
	</body>
</html>

4 CSS样式

.wrap{
	position: relative;
	margin-top: 50px;
	height: 60px;
	padding: 20px;
	background-color: #2f2f2f;
	box-shadow: 5px 7px 6px rgba(0,0,0,.1);
}
span:before,span:after{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: 20px solid transparent;
}
span.icon-triangle-all:before{
	left: 60px;
	border-color: #390 #f30 #36f #ff3;
}
span.icon-triangle-top:before{
	left: 120px;
	border-top-color: #390;
}
span.icon-triangle-right:before{
	left: 180px;
	border-right-color: #f30;
}
span.icon-triangle-bottom:before{
	left: 240px;
	border-bottom-color: #36f;
}
span.icon-triangle-left:before{
	left: 300px;
	border-left-color: #ff3;
}