<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>红色</title> </head> <style> *{ margin: 0; padding: 0; } .gan{ width: 5x; height: 550px; background-color: black; display: inline-block; margin-left: 0px; margin-top: 105px; outline: 5px solid black; } .triangle{ width: 0px; height: 0px; border: 120px solid red; border-bottom-color: transparent; border-left-color: transparent; border-top-color: transparent; display: inline-block; margin-top: 100px; float: left; } </style> <body> <div class="triangle"> </div> <div class="gan"> </div> </body> </html>
使用CSS盒模型中的border来实现 如图的三角形
先为元素添加宽度/高度,和边框
再设置边框厚度;
把元素高宽设置为0;
再隐藏其余3个方向的边框。
变秃了 也变强了