上升、下降（三角形样式）

最新推荐文章于 2024-01-27 12:48:32 发布

原创最新推荐文章于 2024-01-27 12:48:32 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript #css

该文章展示了如何利用CSS的边框特性来创建不规则形状，如向上箭头(.up)和向下箭头(.down)，通过透明边框和不同颜色的底部或顶部边框实现三角形效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.up{
  margin-left: 3px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #52CF78;
}
.down{
   margin-left: 3px;
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 10px solid red;
}