CallMeNorm CallMeNorm - 5 months ago 12
CSS Question

How come half the triangle is missing

I was looking at css-tricks to see how to make a triangle with css. In the comments there was a question about how to give the triangle a border.

I thought I had a solution, but the results were unexpected. How come the right half of the inner triangle is missing.



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





If I change the inner triangle to have
display: block
or
display: inline-block
, the right half exists, but it's gone when then inner triangle has
display: inline
and I don't know why.

Answer

Strange, it works on Firefox and IE.

You can make it work on Chrome with

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

Comments