CSS 绘制三角形小箭头

最新推荐文章于 2024-06-22 09:56:05 发布

alokka

最新推荐文章于 2024-06-22 09:56:05 发布

阅读量646

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/alokka/article/details/101541938

版权

CSS 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

经常浏览网页或者写页面的同学肯定见过网页中导航栏或者二维码提示中出现的三角形小箭头

在这里插入图片描述
（图片来源网络侵删）

这种三角形箭头不需要在用图片来实现了今天就教大家用纯 css 实现三角形小箭头为了能看清三角形颜色用黑色代替大家可以任意更改颜色

下三角

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	div{
	  width:0px;
	  height:0px;
	  border: 100px solid transparent;
	  border-top-color: #000;
	}
</style>
</head>
<body>
<div></div>
</body>
</html>

上三角

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	div{
	  width:0px;
	  height:0px;
	  border: 100px solid transparent;
	  border-bottom-color: #000;
	}
</style>
</head>
<body>
<div></div>
</body>
</html>

左三角

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	div{
	  width:0px;
	  height:0px;
	  border: 100px solid transparent;
	  border-right-color: #000;
	}
</style>
</head>
<body>
<div></div>
</body>
</html>

右三角

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	div{
	  width:0px;
	  height:0px;
	  border: 100px solid transparent;
	  border-left-color: #000;
	}
</style>
</head>
<body>
<div></div>
</body>
</html>

一般这种三角形都是用伪元素来加上的代码参考

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	div{
		width:100px;
		height: 100px;
		background-color: plum;
		position:relative;
	}
	div:after{
    	content: "";
    	display: block;
    	position: absolute;
		bottom:-20px;
    	left: 50%;
		margin-left: -10px;
    	border: 10px solid transparent;
    	border-top-color: plum;
	}
</style>
</head>
<body>
<div></div>
</body>
</html>

alokka

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 绘制三角形小箭头

经常浏览网页或者写页面的同学肯定见过网页中导航栏或者二维码提示中出现的三角形小箭头（图片来源网络侵删）这种三角形箭头不需要在用图片来实现了今天就教大家用纯 css 实现三角形小箭头为了能看清三角形颜色用黑色代替大家可以任意更改颜色下三角<!DOCTYPE html><html><head><meta charset="utf-...
复制链接

扫一扫