CSS实现三角形

news2024/11/14 20:58:57

CSS实现三角形

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

前言

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

第一种:border+transparent

border是边框，而transparent是透明的颜色，下图为它俩结合实现的三角形样式。
在这里插入图片描述

<!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>

在这里插入图片描述

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

使用unicode字符

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

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