css - 仅使用 css 在 div 中插入三 Angular 形

Question

我已经玩了很长时间试图使用插入阴影 css3 属性来实现这一点。我想将蓝色三 Angular 形插入 div 内，就像我看到仅使用 border css 属性完成的外部三 Angular 形一样。

有人可以告诉我插入阴影方法好吗，或者我应该使用其他方法吗？我怎样才能达到这个效果？使用纯 CSS 插入三 Angular 形？

Answer 1

不可能使用 box-shadow，但是您可以在 :pseudo-element 上使用三 Angular 形。

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>