纯css制作箭头

最新推荐文章于 2024-07-31 16:40:00 发布

南巷伊人

最新推荐文章于 2024-07-31 16:40:00 发布

阅读量293

点赞数

分类专栏： CSS样式文章标签： css样式写箭头

本文链接：https://blog.csdn.net/my_yiren/article/details/102374794

版权

CSS样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css制作箭头，下面写了向上箭头的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>向上箭头</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.top {
				position: absolute;
				margin: 200px;
			}

			.top:before,
			.top:after {
				position: absolute;
				content: '';
				border-top: 10px solid transparent;
				border-bottom: 10px solid red;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
			}
			.top:after{
				top: 4px;
				border-bottom: 10px solid #fff;
			}
		</style>
	</head>
	<body>
		<p class="top"></p>
	</body>
</html>

效果如下图所示：
[外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述]议将图片上https://传(imbloQsdnimg.35Dccn/201910081545058.png75703)(https://img-blog.csdnimg.辅导费8154505358.png)]
其他方向同理即可

接下来制作一个箭头的边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>向上箭头</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.main{
				margin: 200px;
				position: relative;
			}
			.left {
				position: absolute;
				z-index: 10;
			}

			.left:before,
			.left:after {
				position: absolute;
				content: '';
				border-top: 10px solid transparent;
				border-bottom: 10px solid red;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
			}
			.left:after{
				top: 1px;
				border-bottom: 10px solid #fff;
			}
			.box{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				position: absolute;
				top: 20px;
				left: -30px;
			}
		</style>
	</head>
	<body>
		
		<div class="main">
			<p class="left"></p>
			<p class="box"></p>
		</div>
	</body>
</html>