Css 如何在div标记上添加带边框的三角形

我有一个div标签

 __________
|          |    
|          |    
|          |    
|__________|

我想在上面加一个小三角形

 _______/\_
|          |    
|          |    
|          |    
|__________|

注意：我希望我的div标签带有特定颜色的边框，div主体是另一种颜色。比如说，我的div背景是白色的，边框应该是蓝色的。 请看这个。

---

您可以在图形编辑器中创建三角形图像，然后将该图像放入DIV中，然后通过绝对定位DIV并设置顶部和左侧坐标将该DIV浮动到固定坐标

使用带有指针和阴影的初始框，可以重新设置它们的样式，以生成所需的形状：

.arrow\u框{
顶部：40px；
位置：相对位置；
背景：#ffffff；
边框：1px纯色#719ECE；/*在此处设置边框颜色*/
宽度：200px；
高度：200px；
边界半径：3px；
-webkit过滤器：放置阴影（0 1px 10px rgba（113、158、206、0.8））；/*在此处设置阴影颜色和大小*/
-莫兹盒阴影：0 1px10px rgba（113、158、206、0.8）；
滤镜：阴影（0 1px 10px rgba（113、158、206、0.8））；
}
.箭头框：在，
.箭头框：在{
底部：100%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
}
.箭头框：在{
边框颜色：rgba（255、255、255、0）；
边框底色：#ffffff；
边框宽度：19px；
左：50%；
左边距：-19px；
}
.箭头框：在{
边框颜色：rgba（113、158、206、0）；
边框底色：#719ECE；
边框宽度：20px；
左：50%；
左边距：-20px；
}

---

首先，你必须制作一个像/\这样的图像，你需要一个边框颜色，然后将.png图像保存到你的首选位置，然后移动到css代码定位该图像，因此使用以下代码：

背景图片：url（images/triangle_img.png）； 背景重复：无重复； 背景位置：顶部

并使用指定的div样式添加此代码。我只给出了用除法边界放置三角形边界的代码上面的“Pete”的答案很好地说明了如何操作，也可以使用一些参数来了解如何工作。对于那些不了解它是如何工作的人，请阅读这篇文章，它展示了三角形是如何从边界（我指的是原理）形成的。 .

---

然后它只是在前后使用，我们可能只使用一个，这取决于我们想要什么，事实上，在前用于制作蓝色三角形，在白色三角形之后，它们一个叠加在另一个之上，使用1px diff，以便在三角形中有边界，但如果不需要，则使用前一个。（您可以在之前更改页边距，只需稍加修改即可查看其效果）。这很有用。

它必须有光晕/阴影效果吗？是的。应该这样@Pete我已经用三角形创建了div box，唯一的问题是给它一个边框颜色和阴影。@user2207792为您提供了一个答案有趣的解释：这更像是修补我的代码。如果过度缩放，我将无法正确显示我的标签，尽管它的向量（？）。谢谢！我也试过了，但无法获得三角形的发光效果。多亏了你，我现在拥有了它！真漂亮！再次感谢你！如果您希望在其他浏览器中使用阴影，可能会有所帮助