【CSS】实现各类三角形

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

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>


猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论