巧用CSS实现各种形状的三角形

最新推荐文章于 2024-10-18 21:23:17 发布

Heidi__

最新推荐文章于 2024-10-18 21:23:17 发布

阅读量159

点赞数 1

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_48953950/article/details/115531242

版权

CSS 三角形边框图形绘制前端开发

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

巧用CSS实现各种形状的三角形

- - 先看效果，选择你所需要的形状
  - - 实现原理
    - 上干货（与上面图片一一对应哦~）

先看效果，选择你所需要的形状

各种形状的三角形

实现原理

使用border实现，通过显示隐藏不同方向的border来实现不同形状的三角形

上干货（与上面图片一一对应哦~）

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*向上三角形*/
		.top {
			width: 0px;
			height: 0px;			
			border: 20px solid transparent;
			border-top: none;
			border-bottom-color:pink;
		}

		/*向下三角形*/
		.bottom {
			width: 0px;
			height: 0px;			
			border: 20px solid transparent;
			border-bottom: none;
			border-top-color:pink;
		}

		/*向左三角形*/
		.left {
			width: 0px;
			height: 0px;			
			border: 20px solid transparent;
			border-left: none;
			border-right-color:pink;
		}

		/*向右三角形*/
		.right {
			width: 0px;
			height: 0px;			
			border: 20px solid transparent;
			border-right: none;
			border-left-color:pink;
		}

		/*向上三角形*/
		.top2 {
			width: 0px;
			height: 0px;			
			border: 20px solid transparent;			
			border-top: none;
			border-bottom:60px solid pink;		
		}

		/*向下三角形*/
		.bottom2 {
			width: 0px;
			height: 0px;			
			border: 20px solid transparent;			
			border-bottom: none;
			border-top-color:pink;
			border-top:60px solid pink;
		}

		/*直角三角形*/
		.zhijiao1 {
			width: 0px;
			height: 0px;			
			border: 20px solid transparent;			
			border-bottom: none;
			border-left: none;
			border-right-color: pink;			
		}

		.zhijiao2 {
			width: 0px;
			height: 0px;			
			border: 20px solid transparent;			
			border-bottom: none;
			border-right: none;
			border-left-color: pink;			
		}

		.zhijiao3 {
			width: 0px;
			height: 0px;			
			border: 20px solid transparent;		
			border-left: none;
			border-top: none;			
			border-right-color: pink;	
		}

		.zhijiao4 {
			width: 0px;
			height: 0px;			
			border: 20px solid transparent;		
			border-right: none;
			border-top: none;			
			border-left-color: pink;	
		}
	</style>
</head>
<body>
	<div class="top"></div>
	<br><br>
	<div class="bottom"></div>
	<br><br>
	<div class="left"></div>
	<br><br>
	<div class="right"></div>
	<br><br>
	<div class="top2"></div>
	<br><br>
	<div class="bottom2"></div>
	<br><br>
	<div class="zhijiao1"></div>
	<br><br>
	<div class="zhijiao2"></div>
	<br><br>
	<div class="zhijiao3"></div>
	<br><br>
	<div class="zhijiao4"></div>
</body>
</html>