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

最新推荐文章于 2024-01-24 06:30:00 发布

原创

最新推荐文章于 2024-01-24 06:30:00 发布 · 2.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#CSS三角形 #CSS空心三角形

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

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的泡泡提示框空心下三角的效果