Inset triangle in a div using only css

Question

I have been playing for a long time trying to achieve this using inset shadow css3 property. I would like to inset the blue triangle inside a div like I've seen the outside triangles done using just a border css property.

Can someone please advise me is the inset shadow approach good, or should I use some other way? How can I achieve this effect? Insetting a triangle using pure css?

Answer 1

It's not possible using box-shadow, however you could use a triangle on a :pseudo-element instead.

div {
  position: relative;
  width: 100px;
  height: 100px;
  background: black;
}
div:after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  bottom: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 20px solid #3D6AB3;
  -moz-transform: scale(0.999);
  -webkit-backface-visibility: hidden;
}

<div></div>