用css逻辑解释用div创建一个三角形？

Question

我最近在创建一个带有一些文本的元素，但它必须是基于标志的形状。我用Google搜索并发现下面很好的CSS来实现它。他们基本上使用css创建了div的小三角形（指向左/右/顶部/底部）并将其与相邻的div相连。

然而，我没有找到所提到的逻辑的任何答案，因此使我对使用CSS的div的三角形创建感到困惑。

我想知道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;
 }

这里是codepen链接：http://codepen.io/anon/pen/JGvBpN

非常感谢任何指针！感谢。

Answer 1

它没有创建一个三角形，因为它似乎给出了如何以一定角度渲染边界交点。

.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的开发工具中的框的图示，拉出位置以使所发生的事情变得更加明显：

这就是定位恢复：

请注意，您认为透明的部分实际上是不透明的，因此不会遮挡橙色结帐块的任何部分;很明显，如果底层页面的背景不是白色的话，你会在那里画一个白色部分。

对于它的价值，可能值得研究使用图像或SVG和CSS masking来实际＆＃34;切割＆＃34;按钮的一部分，但您需要检查user agent support是否符合您的需求，或尝试使用work arounds。