数学之美：Marden定理
这篇讲的是Marden定理，一个将多项
标签：三角形
共 3 篇相关文章
三角形变形记之纯css实现的分布导航条效果
这篇讲的是作者如何用纯CSS实现一个带有三角形变形动画的分布导航条效果。文章从一个具体的导航组件需求出发，详细拆解了整个实现过程：首先通过语义化的HTML搭建导航结构，然后利用CSS伪元素（如::before和::after）结合border属性或clip-path路径来绘制三角形，确保图形精准且兼容性良好。核心巧妙之处在于变形动画的实现——作者运用CSS3的transition和transform属性，让三角形在用户悬停时平滑缩放或旋转，创造出流畅的交互体验，整个过程无需JavaScript介入。 文章还深入探讨了响应式设计的处理，通过媒体查询在不同视口下调整导航条的布局和三角形尺寸，使其在桌面端和移动端都能保持视觉一致性。作者对比了传统JavaScript动画方案，突出了纯CSS方法的优势：代码更简洁、性能开销更低，且在现代浏览器中运行稳定。对于前端开发者而言，这不仅提供了一个可直接复用的导航条模板，也展示了如何将基础CSS技巧组合成高级效果，启发大家在项目中更多尝试纯CSS解决方案来提升开发效率和用户体验。
Tip中的指示箭头实现
这篇讲的是前端开发中一个经典小问题的解决思路：如何在 Tip 组件（如气泡提示框）里用纯 CSS 画出那个指示用的小三角箭头。作者从之前的实践出发，对比了两种主要的技术方案。 文章核心聚焦在 CSS border 属性的巧妙利用上。一种方法是利用元素的 border 宽度设置和透明色，让四个方向的边框在视觉上拼接成一个三角形；另一种方法则是在此基础上的变体或优化。通过对比，文章分析了不同方案的实现细节和适用场景。 对于前端工程师来说，这是个实用但容易忽略的 CSS 小技巧。文章没有停留在理论，而是直接展示了可复用的代码思路，帮助读者在遇到类似 UI 实现需求时，能快速选择最合适的方法。理解这种基础图形的 CSS 构造逻辑，对提升页面开发效率和实现精细化视觉效果都有直接帮助。