css 理解了原理，绘制三角形就简单了

1.border-位置

注意：border-bottom/up/right/left 主要是以三角形的结构搭建而成，而border也是如此。而且从边框的外围开始计算像素尺寸。在理解了这一点之后，绘制三角形就简单多了。

1.transparent

注意：该属性主要是颜色透明。

<template><main style="width:500px;border:1px solid;margin: 0 auto;"><div style="margin: 0 auto;width: 200px;"><div class="up"></div><div class="down"></div><div class="left"></div><div class="right"></div></div></main>
</template>
<script setup>
//transparent 颜色透明
</script><style  lang="less" scoped>.up{width: 0;height: 0;border: 100px solid;border-top: 100px solid red;}.down{width: 0;height: 0;border: 100px solid transparent;border-bottom: 100px solid yellow;}.left{width: 0;height: 0;border: 100px solid transparent;border-left: 100px solid blue;}.right{width: 0;height: 0;border: 100px solid transparent;border-top: 100px solid green;}
</style>

嗨，我是小路。如果喜欢这篇文章，记得【点赞】+【关注】+【收藏】。