常见样式问题二、CSS实现普通三角形、空心三角形

最新推荐文章于 2025-05-14 17:03:41 发布

杭电茶娃

最新推荐文章于 2025-05-14 17:03:41 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS三角形 CSS空心三角形

本文链接：https://blog.youkuaiyun.com/c11073138/article/details/79428924

本文介绍了CSS如何创建普通三角形和空心三角形，通过分析bootstrap源码中的空心三角形实例，揭示了利用边框颜色和宽高为0来形成三角形的原理。此外，还提供了不同方式实现空心三角形的代码示例。

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

1、初识css三角形

第一次知道CSS实现的三角形是在bootstrap源码中看到。bootstrap泡泡提示框的空心三角形就是用css实现的。下面是bootstrap v3.3.6中跟空心三角形相关的代码：

.popover > .arrow,
.popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.popover > .arrow {
  border-width: 11px;
}
.popover > .arrow:after {
  content: "";
  border-width: 10px;
}
.popover.top > .arrow {
  /*略去无关代码*/
  border-top-color: #999;
  border-top-color: rgba(0, 0, 0, .25);
  border-bottom-width: 0;
}
.popover.top > .arrow:after {
   /*略去无关代码*/  
   content: " ";
  border-top-color: #fff;  
  border-bottom-width: 0;
}

这是bootstrap的泡泡提示框空心下三角的效果