今天做pink老师js-api京东快递单号的时候,遇到一个问题就是需要制作三角,制作三角的效果有点印象,但是发现原理还没掌握,以为之前自己已经记录了三角的原理做法,回来翻看自己博客,发现没有,所以在此记录一下;
<!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>Document</title>
<style>
.box1 {
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid yellow;
border-left: 10px solid skyblue;
}
</style>
</head>
<body>
<!-- css三角的做法 -->
<div class="box1"></div>
</body>
</html>
一开始,我写的代码是这样的,但是后来,运行的时候,发现效果是这样的:
当时明明记得老师演示的时候是将一个正方形,分成了四个除了不一样,其他均一样的三角形。后来经过调试发现,原来div盒子的宽度没有设置,需要设置成0;
<!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>Document</title>
<style>
.box1 {
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid yellow;
border-left: 10px solid skyblue;
}
</style>
</head>
<body>
<!-- css三角的做法 -->
<div class="box1"></div>
</body>
</html>
这才是想要的效果,下面,把其中一个颜色改成我们需要的颜色,把其他颜色变成transparent透明颜色就行;
<!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>Document</title>
<style>
.box1 {
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid pink;
}
</style>
</head>
<body>
<!-- css三角的做法 -->
<div class="box1"></div>
</body>
</html>