css 三角形画法

最新推荐文章于 2022-08-05 21:20:29 发布

五笔小哥

最新推荐文章于 2022-08-05 21:20:29 发布

阅读量275

点赞数

分类专栏：代码知识文章标签： css 三角形三角形画法

本文链接：https://blog.csdn.net/qq_43344133/article/details/90340587

版权

代码知识专栏收录该内容

42 篇文章 0 订阅

订阅专栏

css 三角形画法

项目中，会有一些边角的位置使用的三角形的地方，这时候如果没有刻意改变，可使用 css 来实现。

使用 border 实现三角形的画法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>triangle 实现</title>
</head>
<style>
	#triangle-up{  //向上三角形样式
		width:0px;
		height:0px;
		border-left:50px solid transparent;
		border-right:50px solid transparent;
		border-bottom:60px #f00 solid;
	}
	#triangle-left{  //向左三角形样式
		width:0px;
		height:0px;
		border-top:50px solid transparent;
		border-bottom:50px solid transparent;
		border-right:60px #0f0 solid;
	}
	#triangle-right{  //向右三角形样式
		width:0px;
		height:0px;
		border-top:50px solid transparent;
		border-bottom:50px solid transparent;
		border-left:60px #00f solid;
	}
	#triangle-down{ //向下三角形样式
		width:0px;
		height:0px;
		border-left:50px solid transparent;
		border-right:50px solid transparent;
		border-top:60px #f00 solid;
	}
</style>
<body>
	<div id="triangle-up"></div>
	<br>
	<div id="triangle-left"></div>
	<br>
	<div id="triangle-right"></div>
	<br>
	<div id="triangle-down"></div>
</body>
</html>

说明：（以向上三角形事例说明）

html元素可以是块级元素，也可以是行级元素、行内元素；
css 样式中, 类似将border分成了上下左右四块，每个三角形的实现都只用了三部分，另外一部分的样式则为 0；
css样式中，缺少的那一部分的对立样式(如上对应下，左对应右)，则为设置三角形的高度和方向，其中高度的增加方向，是从尖头向平头的方向增加，而颜色则为三角形的背景色；

小小的积累，成就大大的收获！！！

五笔小哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 三角形画法

css 三角形项目中，会有一些边角的位置使用的三角形的地方，这时候如果没有刻意改变，可使用 css 来实现。使用 border 实现三角形的画法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>triangle 实现</title&...
复制链接

扫一扫

专栏目录