CSS三角
程序员文章站
2022-05-26 22:25:21
...
1 CSS三角
三角大小由盒子边框大小决定。
2 设置一个角
只需设置盒子边框为透明，设置其中一个方向为所需颜色。
3 京东案例
需要一个大盒子和一个向上的三角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS三角</title>
<style>
/*子绝父相*/
.box{
position: relative;
width: 300px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
.box2{
position: absolute;
right: 15px;
/*top值 盒子边框的2倍*/
top:-40px;
width: 0px;
height: 0px;
/*为了照顾兼容性*/
line-height: 0;
font-size: 0;
border: 20px solid transparent;
border-bottom: 20px solid pink;
/*border-bottom-color: pink;*/
}
</style>
</head>
<body>
<div class="box">
<span class="box2"></span>
</div>
</body>
</html>
上一篇： [其他]windows10锁屏背景的位置-无需更换文件格式-方便保存
下一篇： CSS 三角制作