本文介绍了如何使用纯CSS实现等边空心三角形，通过创建两个叠加的三角形，利用伪类before和after，并调整大小来达到空心效果。此技巧适用于不同方位的空心三角形设计。
前段时间写了一些静态页面，用到了空心三角形，手到擒来的是实心三角形，对于空心的三角形，确实用了我这个老年人的脑子想了一想如何布局。给到的设计图如下图所示：
就是左上方的那个小三角，不止这个方位有，别的方位也都有，还有别的页面也有不同朝向的三角形；
话不多说，代码记录下来：
首先蓝色border的一整块是一个div
<div class="main"></div>//大致绘制一个四方形
.main{
width:80%;height:纯css实现等边空心三角形
最新推荐文章于 2025-06-21 09:15:59 发布
最低0.47元/天 解锁文章
扫一扫
1075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
