本文介绍了如何使用CSS创建三角形，包括两种不同的实现方式，并详细解析了京东样式的三角形效果。首先，通过设置宽度和高度为0以及不同颜色的边框创建了一个基本的三角形。接着，展示了另一种方法，通过透明边框和指定颜色创建所需方向的三角形。最后，分析并提供了京东样式三角形的HTML和CSS代码，该效果由一个盒子和定位三角形组成，实现了三角形覆盖在盒子上的视觉效果。
目录
1.三角形由来
设置一个，width和height为0，上下左右颜色不同的边框
代码如下：
.box1 {
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid rgb(247, 250, 69);
border-bottom: 10px solid rgb(116, 162, 223);
border-left: 10px solid rgb(233, 33, 183);
}效果图：
2. 三角的写法
- 设置width和height为0
- 设置边框为透明色transparent
- 设置需要的三角形方向和颜色border-left-color（left可写成right、bottom、top、）
- border的大小就是三角形的大小
代码如下：
.box2 {
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: rgb(142, 240, 122);
margin: 10px auto;
}效果图：
3. 京东三角案例
3.1 分析
- 这个效果图由一个盒子和一个定位三角构成
- 三角用定位position覆盖在盒子上（子绝父相）
3.2 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JD</title>
<style>
.jd {
position: relative;
width: 300px;
height: 200px;
background-color: rgb(135, 183, 228);
margin: 100px auto;
}
.jd span {
position: absolute;
right: 40px;
top: -20px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-bottom-color: rgb(135, 183, 228);
}
</style>
</head>
<body>
<div class="jd">
<span></span>
</div>
</body>
</html>3.3 效果图
扫一扫
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
