<head>
<style>
/* 三角形制作的原理 */
/* 先设置一个没有 宽高 的盒子,然后设置他的边框 */
.one {
width: 0;
height: 0;
border-top: 100px solid red;
border-bottom: 100px solid green;
border-left: 100px solid blue;
border-right: 100px solid yellow;
}
/* 按照上面做法,将其他三个边框设置成透明色即可 */
/* 通过各边的border宽度去控制三角形的边长 */
.two {
width: 0;
height: 0;
border-bottom: 100px solid green;
border-right: 200px solid transparent;
border-top: 150px solid transparent;
border-left: 250px solid transparent;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
CSS做一个三角形
最新推荐文章于 2024-03-03 10:16:27 发布