html - 使用 css 逻辑解释从 div 创建三 Angular 形？

<分区>

我最近致力于创建一个元素，其中包含一些文本，但它必须是基于标志的形状。我用谷歌搜索并在下面找到了很好的 css 来实现它。他们基本上使用 css 从 div(指向左/右/顶部/底部)创建小三 Angular 形并将其附加到相邻的 div。

但是，我没有找到上述逻辑的任何答案，这让我对使用 CSS 从 div 创建三 Angular 形感到困惑。

我想知道那个 css 是如何工作的，特别是下面使用的 arrow-left 类。

HTML:

<div class='element'>
   <p>OFFER</p>
   <div class="arrow-left"></div>
</div>

CSS:

.element{
  background-color:#E47911;
  display:inline-block;
  position:relative;
  padding:2px 15px 2px 10px;
  color:white;
  line-height:18px;
}
p{
  font-size:10px;
  margin:0;
}
.arrow-left {
   width: 0; 
   height: 0; 
   border-top: 11px solid transparent;
   border-bottom: 11px solid transparent;
   border-right: 11px solid white;
   display:inline-block;
   position:absolute;
   top:0px;
   right:0px;
 }

这是代码笔链接:http://codepen.io/anon/pen/JGvBpN

非常感谢任何指点!谢谢。

最佳答案

考虑到边界交叉点是如何以一定 Angular 呈现的，它并没有像看起来那样创建三 Angular 形。

.arrow-left {
 width: 0; /* unnecessary, but does override any unexpected width  */
 height: 0; /* unnecessary, but does override any unexpected height */

 /* These set up the intersecting borders, set each one to a different color to see the borders forming the "triangle" e.g. red, green, blue  */
 border-top: 11px solid transparent;
 border-bottom: 11px solid transparent;
 border-right: 11px solid white;

 display:inline-block; /* unnecessary, you're taking the elemtn out of the document flow when you absolute potiion it and the div id a block level element anyway, but to correctly have a border you'll need this so it's a decent safeguard */

 /* this takes the element out of the document flow and positions it absolutely within the nearest positioning parent, in this case, the relatively positioned parent */
 position:absolute;

 /* this moves it to the top right edges of the positioning parent*/
 top:0px;
 right:0px;

这是 chrome 的开发工具中的框的插图，将其拉出位置以使正在发生的事情的效果更加明显: