CSS实现三角形

CSS实现三角形

  • 前言
  • 第一种:border+transparent
  • 第二种border+rgb
  • 使用unicode字符

前言

本文讲解三种实现三角形的方式,并且配有图文以及代码解说。那么好,本文正式开始。

第一种:border+transparent

border是边框,而transparent是透明的颜色,下图为它俩结合实现的三角形样式。
CSS实现三角形_第1张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三角形</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				min-height: 100vh;
				background: linear-gradient(-135deg, #4230cc, #00aaff)
			}

			.demo {
				margin: 10px;
				float: left;
				width: 0;
				height: 0;
				border-left: 50px solid gray;
				border-top: 50px solid black;
				border-bottom: 50px solid lightblue;
				border-right: 50px solid lightgray;
			}

			.demo1 {
				margin: 10px;
				float: left;
				width: 0;
				height: 0;
				border-left: 50px solid gray;
				border-right: 50px solid transparent;
				border-top: 50px solid transparent;
				border-bottom: 50px solid gray;
			}

			.demo2 {
				margin: 10px;
				float: left;
				width: 0;
				height: 0;
				border-left: 50px solid transparent;
				border-top: 50px solid transparent;
				border-bottom: 50px solid lightblue;
				border-right: 50px solid lightblue;
			}

			.demo3 {
				margin: 10px;
				float: left;
				width: 0;
				height: 0;
				border-left: 50px solid lightgray;
				border-top: 50px solid lightgray;
				border-bottom: 50px solid transparent;
				border-right: 50px solid transparent;
			}

			.demo4 {
				margin: 10px;
				float: left;
				width: 0;
				height: 0;
				border-left: 50px solid transparent;
				border-top: 50px solid black;
				border-bottom: 50px solid transparent;
				border-right: 50px solid black;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="demo"></div>
			<div class="demo1"></div>
			<div class="demo2"></div>
			<div class="demo3"></div>
			<div class="demo4"></div>
		</div>
	</body>
</html>

在上述代码中,主要是利用borderCSS样式以及transparent透明度来实现三角形调用,再class为demo的div中,我们分别给上下左右边框赋不同的颜色且相同的大小时我们会发现,我们有四个不同方向的三角形,那么我们就可以给其他任意两个方向的边框设置成透明,然后再给两个方向设置成相同颜色可以得到一个直角三角形,或者只给一个方向设置颜色也可以得到一个等腰三角形。

第二种border+rgb

<!DOCTYPE html>
<html>
<head>
  <style>
    .rgb {
        width:0;
        height:0;
		border-top:50px solid gray;
        border-right:50px solid rgb(0, 0, 0,0);
        border-left:50px solid rgb(0,0,0,0);
        border-bottom:50px solid red;
    }
  </style>
</head>
<body>
  <div class="rgb"></div>

</body>
</html>

CSS实现三角形_第2张图片

border+rgb属性也可以实现三角形效果,实现原因是rgb的第四个属性为透明度,和transparent透明颜色有异曲同工之妙,所以再某种程度上transparent=rgb第四个属性为0,所以border+rgb也可以实现相同的三角形效果。

使用unicode字符

unicode字符也可以实现三角形,不过不能改变它的方向,

<!DOCTYPE html>
<html>
<head>
  <style>
    .str {
		font-size:100px;
    }
  </style>
</head>
<body>
  <div class="str">
	  &#9650
  </div>
</body>
</html>

这个也可以实现三角形效果,可以通过调用font-size长度来对这个三角形字符大小进行调整。
CSS实现三角形_第3张图片

你可能感兴趣的:(CSS,css,前端,html5)