CSS实现三角形

最新推荐文章于 2023-09-05 16:23:33 发布

置顶落花别有意流水似无情

最新推荐文章于 2023-09-05 16:23:33 发布

阅读量102

点赞数

文章标签： CSS实现三角形

本文链接：https://blog.csdn.net/weixin_42931825/article/details/102677206

版权

实现三角形的原理就是不给标签元素设置高度，然后给标签只设置外边框，从而实现三角形，例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三角形实现</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.Outer1{
			width: 0;
			height: 0;
			border: solid ;
			border-width: 20px;
			border-color: red blue yellow black; 
		}
	</style>
</head>
<body>
	
	<div class="Outer1">
	</div>
</body>
</html>

再根据我们的需要进行修改，比如说需要向上的三角形，那么我们就可以这样设置；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三角形实现</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.Outer1{
			width: 0;
			height: 0;
			border: solid ;
			border-width: 20px;
			border-color: transparent transparent yellow transparent; 
		}
	</style>
</head>
<body>
	
	<div class="Outer1">
	</div>
</body>
</html>

落花别有意流水似无情

关注

0
点赞
踩
2

收藏

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

实现三角形的原理就是不给标签元素设置高度，然后给标签只设置外边框，从而实现三角形，例如：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三角形实现</title> <style type="text/css">...
复制链接

扫一扫