仅使用css在div中插入三角形

Question

我已经玩了很长时间试图使用inset shadow css3属性实现这一点。我想插入div中的蓝色三角形，就像我看到外部三角形只使用边框css属性完成。

有人可以告诉我插入阴影的方法是好的，还是应该用其他方式？我怎样才能达到这个效果？使用纯css插入三角形？

Answer 1

使用box-shadow无法实现，但您可以在：： - 伪元素上使用三角形。

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;