边框实现三角形
边框实现三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框实现三角形</title>
<style>
.triangle {
/*不给div设置宽高，只设置边框，并且边框无限大的话它就会无限趋向于中心。*/
width: 0;
height: 0;
/* width: 100px;
height: 100px;
background: #000;*/
/*border-left: 100px solid red;*/
border-right: 100px solid blue ;
border-top: 100px solid transparent ;
border-bottom: 100px solid transparent;
/*三角形适用场景：下拉*/
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
测试结果：
--------------------------------------------------------------------
三角形下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形下拉菜单</title>
</head>
<style>
.pull-down {
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-left: 50px solid pink;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.pull-down:hover {
transform: rotate(90deg);
cursor: pointer;
}
</style>
<body>
<div class="pull-down"></div>
</body>
</html>
测试结果：