.box1{
width: 0px;
height: 0px;
border-top: 20px solid red;
border-left: 20px solid yellow;
border-right: 20px solid blue;
border-bottom: 20px solid pink;
}
<body>
<div class="box1"></div>
</body>
将不需要的部分变为透明色就会得到一个三角形
/* 将不需要的部分变透明有三种方法
1、将不需要的部分的颜色变为和底色一致
2、利用rgb(0,0,0,透明度)去设置
3、利用transparent去设置会变成和底色一致的颜色 */
.box2{
width: 0px;
height: 0px;
/* border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid blue; */
/* 可以简写成 */
border: 20px solid transparent;
border-bottom: 20px solid blue;
}
即可得到一个蓝色的上三角
利用三角案例完成前端界面中下拉栏三角的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角案例</title>
</head>
<style>
.box{
width: 100px;
height: 50px;
line-height: 50px;
text-indent: 10px;
background-color: pink;
}
span{
width: 0px;
height: 0px;
display: inline-block;
border: 5px solid transparent;
border-bottom: 5px solid black;
position: relative;//使用定位将原先的三角形移动至居中位置
top:-2.5px;
}
.box:hover span{
border: 5px solid transparent;
border-top: 5px solid black;
position: relative;
top:2.5px;
}
</style>
<body>
<div class="box">
前端教程
<span></span>
</div>
</body>
</html>
885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
