Question

我看着css-tricks看看如何用css制作一个三角形。在评论中有一个关于如何给三角形边界的问题。

我以为我有一个解决方案，但结果出人意料。为什么缺少内三角的右半部分。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

如果我将内部三角形更改为display: block或display: inline-block，则右半部分存在，但当内部三角形具有display: inline并且我没有＆＃39时，它就消失了不知道为什么。

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>

为什么三角形的一半丢失了

1 个答案: