在网页制作中我们如何实现小三角？ 如下京东官网
先来看如下代码
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
div{
height: 0;
width: 0;
border:10px solid red;
border-top-color: blue;
border-right-color: aqua;
border-bottom-color: bisque;
}
</style>
</head>
<body>
<div></div>
</body>
</html>代码很简单，我们设定元素高宽为0 ，并指定四个边框的颜色不同，就出现了下面的效果
基于这种特性，我们做小三角就很简单了，只需使其他三边为透明背景即可
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
div{
height: 0;
width: 0;
border:10px solid transparent;
border-top-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我们只需将该元素定位到某个div上即可实现京东首页二维码效果。
