【CSS】实现各类三角形

翻滚的胖子
2020-03-21 22:12:34
前端技术
HTML CSS APICloud

日常开发中经常需要用到三角形样式，要实现三角形样式可以通过：

1：字体库

2：CSS样式

3：图片

今天我们就来讲一讲如果通过CSS实现各类三角形

实现原理就是，创建一个正方形块元素，然后截取它的某一边，然后将其余部分设置为透明色，即可获取需要的三角形。

1：三角形

翻滚的胖子博客

<html>
	<head>
		<style>
			arrow{
				width:0;
				height:0;
				border: 10px solid transparent;
				border-left-color: orange;//左箭头
			}
		</style>
	</head>
	<body>
		div class="arrow"></div>
	</body>
</html>

2：梯形

翻滚的胖子博客

<html>
	<head>
		<style>
			arrow{
				width:10px;
				height:10px;
				border:10px solid #000;
				border-left-color:orange;
			}
		</style>
	</head>
	<body>
		div class="arrow"></div>
	</body>
</html>

3：通过content将三角形与标题融合

翻滚的胖子博客

<html>
	<head>
		<style>
			div{
				position:relative;
			}
			arrow{
				width:0;
				height:0;
				border: 10px solid transparent;
				border-left-color: orange;
				position:absolute;
				content:'';
			}
		</style>
	</head>
	<body>
		div class="arrow"></div>
	</body>
</html>

4：实现箭头符号

翻滚的胖子博客

<html>
	<head>
		<style>
			div {
				position: relative; 
			}
			.arrow:after,.arrow:before {
				width: 0;
				height: 0;
				border: 10px solid transparent;
				border-left-color: orange;
				position: absolute;
				content: "";
			}
			.arrow:before{
				top: 0;
				left: 70px;//根据实际情况调整
				border-left-color: white;
			}
		</style>
	</head>
	<body>
		div class="arrow"></div>
	</body>
</html>

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com