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

Question

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

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

插入三角形

Answer 1

无法使用 box-shadow，但您可以在 :pseudo-element 上使用三角形。

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>

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

Inset triangle in a div using only css

css

css-shapes