一 效果如下
二 实现源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.border {
display: block;
width: 0px;
height: 0px;
border-left: 22px solid rgba(255, 111, 0, 1);
border-bottom: 22px solid transparent;
border-right: 22px solid transparent;
border-top: 22px solid rgba(255, 111, 0, 1);
border-radius: 4px;
cursor: pointer;
}
.triangle {
display: block;
width: 0px;
height: 0px;
border-left: 20px solid white;
border-bottom: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid white;
border-radius: 4px;
cursor: pointer;
margin-top: -21px;
margin-left: -21px;
}
.check {
display: none;
width: 8px;
height: 16px;
border-color: rgba(255, 111, 0, 1);
border-style: solid;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
cursor: pointer;
margin-top: -20px;
margin-left: -10px;
}
</style>
<script>
function onClicked() {
const element = document.getElementsByClassName("check");
// 获取当前状态
const displayValue = element[0].style.display;
if (displayValue === "none") {
element[0].style.display = "block";
} else {
element[0].style.display = "none";
}
}
</script>
</head>
<body>
<div class="border" onclick="onClicked()">
<div class="triangle">
<div class="check"></div>
</div>
</div>
</body>
</html>