实现4种方式
就不啰嗦直接上代码：
/* 隐藏方式1*/ /*display: none;*/ /* 隐藏方式2：visibility 占着位置*/ /*visibility: hidden;*/ /*隐藏方式3：宽高为0*/ width: 0; height: 0; /* 隐藏方式4：透明度为百分百。占着位置*/ /*opacity: 0;*/
div实现的三角形
最后分享一个：一个div实现的三角形
代码实现 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div三角形</title>
<style>
.box2 {
width: 100px;
height: 100px;
background-color: #42b983;
margin-top: 100px;
position: relative;
}
.box2::before {
content: "";
width: 0;
height: 0;
border: 16px solid;
border-color: transparent transparent #d0d0ff transparent;
position: absolute;
top: -12px;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box2"></div>
</body>
</html>