為什么三角形的一半丟失了

Question

我正在研究css-tricks ，看看如何用css制作一個三角形。 在評論中有一個關於如何給三角形邊界的問題。

我以為我有一個解決方案，但結果出人意料。 為什么缺少內三角的右半部分。

 #outer { display: block; height: 0; width: 0; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; } #inner { display: inline; margin: 0; position: relative; left: -40px; top: -6px; height: 0; width: 0; border-top: 40px solid green; border-bottom: 0 solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; } 

 <div id="outer"> <div id="inner"></div> </div> 

如果我改變內部三角形以display: block或display: inline-block ，右半部分存在，但是當內部三角形display: inline時它已經消失display: inline並且我不知道為什么。

Answer 1

奇怪，它適用於Firefox和IE。

您可以在Chrome上使用它

#inner::after {
  content: '\200B';
}

 #outer { display: block; height: 0; width: 0; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; } #inner { display: inline; margin: 0; position: relative; left: -40px; top: -6px; height: 0; width: 0; border-top: 40px solid green; border-bottom: 0 solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; } #inner::after { content: '\\200B'; } 

 <div id="outer"> <div id="inner"> </div> </div>