css实现三角形（上下左右）@莫成尘

最新推荐文章于 2024-04-26 15:54:35 发布

莫成尘

最新推荐文章于 2024-04-26 15:54:35 发布

阅读量720

点赞数 3

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_47821281/article/details/110950107

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右，您将看到以下效果）。

如您满意请给莫成尘点个Fabulous

css绘制三角形

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.div1 {
		    width: 0px;
		    height: 0px;
		    border: 50px solid; /* border的宽度决定了三角形的大小 */
			border-color: transparent; /* 设置border为透明 */
		    border-top-color: red; /* 仅设置上方border显示 其他类似 */
		}
		.div2 {
		    width: 0px;
		    height: 0px;
		    border: 50px solid;
			border-color: transparent;
		    border-right-color: red;
		}
		.div3 {
		    width: 0px;
		    height: 0px;
		    border: 50px solid;
			border-color: transparent;
		    border-bottom-color: red;
		}
		.div4 {
		    width: 0px;
		    height: 0px;
		    border: 50px solid;
			border-color: transparent;
		    border-left-color: red;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
</body>
</html>

附加和可能出现的有用信息已添加注释

莫成尘

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现三角形（上下左右）@莫成尘

先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右，您将看到以下效果）。如您满意请给莫成尘点个Fabulous<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ
复制链接

扫一扫