CSS创建三角形的几种方法

最新推荐文章于 2022-04-29 01:18:54 发布

一月清辉

最新推荐文章于 2022-04-29 01:18:54 发布

阅读量295

点赞数

分类专栏： css布局文章标签： css画三角形

原文链接：http://www.daqianduan.com/4721.html

版权

css布局专栏收录该内容

42 篇文章 5 订阅

订阅专栏

结论：

svg方法（polygon）
canvas方法（moveTo 、lineTo、fill)
border方法
html字符
正方形旋转方法

代码如下

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*svg方法*/
			.svg-triangle {
				width: 100px;
				height: 100px;
				margin: 0 10px;
			}
			
			.svg-triangle polygon {
				fill:#65b81d;
				/*stroke: #65b81d;
				stroke-width: 4;*/
			}
			
			/*旋转方法*/
			#square_box{
				display:inline-block;
				width:100px;
				height: 100px;
				overflow: hidden;
			}
			#square_box #square{
				width: 100%;
				height: 100%;
				transform: rotate(45deg);
				background: red;
				margin-left: -70%;
			}
			
			/*css边框*/
			#borders{
				width: 0;
				height: 0;
				border-width: 70px 50px 30px 50px;
				border-color:red transparent transparent transparent; 
				border-style: solid;
				box-sizing: border-box;
			}
		</style>
	</head>

	<body>
		<h4>svg方法</h4>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
			<polygon points="0,0 100,0 50,100" />
		</svg>
		
		<h4>canvas方法</h4>
		<canvas id="triangle" height="100" width="100"></canvas>
		
		<h4>CSS 边框</h4>
		<div id="borders"></div>
		
		<h4>CSS 旋转正方形</h4>
		<div id="square_box"><div id="square"></div></div>
		
		<h4>HTML 字符</h4>
		<div style="font-size: 50px;">⇠</div>
		
	<script>
		function canvasAngle(){
			var triangle = document.getElementById("triangle");
			var canvas = triangle.getContext('2d');
			
			canvas.beginPath();
			canvas.moveTo(50,0);
			canvas.lineTo(100,100);
			canvas.lineTo(0,100);
			canvas.closePath();
			
			canvas.fillStyle = 'red';
			canvas.fill();
			
		}
		
		canvasAngle()
	</script>	
	</body>

</html>