CSS实现三角形

最新推荐文章于 2024-02-02 14:33:22 发布

坏丶毛病

最新推荐文章于 2024-02-02 14:33:22 发布

阅读量1.6w

点赞数 6

分类专栏： CSS-成长之路 HTML-成长之路文章标签： css 三角形 css实现三角效果坏丶毛病

一只努力学习进步的web前端小菜鸟。转载请声明来源。

本文链接：https://blog.csdn.net/qq_43363884/article/details/89011583

版权

CSS-成长之路同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

HTML-成长之路

8 篇文章 0 订阅

订阅专栏

三角形是我们在开发中常用的，比如点击展开某个树状菜单，右边本来是向右的小箭头，然后变为向下，类似的场景很多。

那么怎么简单的用css实现一个三角形呢？

话不多说，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		span{
			display: block;
			margin: 20px auto;
			width: 0;
			height: 0;
			border:20px solid transparent;
			border-left-color:red;
		}
	</style>
</head>
<body>
	<span></span>
</body>
</html>

效果：

其实核心就几句话，宽高设置为0，由边框来控制大小，然后边框颜色改为透明，然后更改一遍的边框颜色为自己想要的颜色，就能实现三角形效果

（注：span是内联元素，必须转块元素，才能设置宽高）

（注：left控制向右的三角，right控制向左的三角，top控制向下的三角，bottom控制向上的三角）

之后点击只需要改变css中的边框方向就可以了。

好了，以上就是css实现简单的三角效果。

如有问题，请指出，接受批评。

个人微信公众号：

坏丶毛病

关注

6
点赞
踩
21

收藏

觉得还不错? 一键收藏
3
评论
CSS实现三角形

三角形是我们在开发中常用的，比如点击展开某个树状菜单，右边本来是向右的小箭头，然后变为向下，类似的场景很多。那么怎么简单的用css实现一个三角形呢？话不多说，上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Documen...
复制链接

扫一扫