CSS实现三角形
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字符也可以实现三角形，不过不能改变它的方向，▲
<!DOCTYPE html>
<html>
<head><style>.str {font-size:100px;}</style>
</head>
<body><div class="str">▲</div>
</body>
</html>
这个也可以实现三角形效果，可以通过调用font-size长度来对这个三角形字符大小进行调整。
