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

【问题标题】：Inset triangle in a div using only css仅使用 css 在 div 中插入三角形
【发布时间】：2015-01-19 13:53:00
【问题描述】：

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

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

【问题讨论】：

"[请] 告诉我嵌入阴影方法是否好..." - 这完全取决于“嵌入阴影方法”是什么。你能告诉我们吗？此外，正如所写，这似乎纯粹是“基于意见”，因此可能会被关闭，除非您可以改进问题。
@DavidThomas box-shadow: inset 0px 0px 0px 24px blue;
@DavidThomas 谢谢你的建议，我已经编辑了一个具体的问题。

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

您能解释一下为什么要缩放 0.999 属性和背面可见性吗？谢谢。
@user2703038 - 这些属性用于使边缘平滑。如果删除它们，您会看到锯齿状边缘。 -moz-transform: scale(0.999); 用于 Firefox，-webkit-backface-visibility: hidden; 用于 Chrome。
如何在具有动态/未知宽度的 div 上执行此操作？
@JonasPraem - 在这种情况下，我建议使用svg，here's an example
我通过 left: calc(50%-'border-left'px) 在这种情况下 50px 解决了这个问题