代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 0px; height: 0px; border-top: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid blue; border-left: 100px solid transparent; } </style> </head> <body> <div> </div> </body> </html>
过程:先绘制一个正方形,之后用四种不同的颜色绘制出四种不同颜色的边框,之后将正方形的宽高设置为0,将不想要的三个边框设置成透明颜色,就可以制作一个三角形了,这个是制作等腰直角三角形,制作锐角或者钝角时候,只需要将对应的宽度缩小或者扩大就可以了。