用border可以实现如下图的彩色四边形和小三角
说实话,以前写过,但是现在猛地一看还真的没思路。
彩色四边形代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 0;
height: 0;
background: black;
border-color: yellow blue green pink;
border-width: 200px;
border-style: solid;
}
</style>
</head>
<body>
<div class="wrap"></div>
<div class="box">
</div>
</div>
</body>
</html>
三角形代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 0;
height: 0;
border-color: transparent transparent transparent red;
border-style: solid;
border-width: 200px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>