<!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>
.class {
width: 0;
height: 0;
margin: 100px auto;
/* border: 10px solid blue; */
border-top: 10px solid red;
border-left: 10px solid blue;
border-bottom: 10px solid green;
border-right: 10px solid pink;
}
/* 实现显示一个小三角 */
.class1 {
width: 0;
height: 0;
/* 1.先将四个边框进行透明显示 */
border: 50px solid transparent;
/* 2.想要哪个方向的小三角,就定义此方向小三角颜色即可 */
border-left-color: purple;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="class"></div>
<div class="class1"></div>
</body>
</html>
使用css实现小三角
最新推荐文章于 2024-06-19 14:48:22 发布