Html 使用CSS创建三角形div

我最近学习了如何使用CSS和HTML创建三角形div的外观。现在，我想知道，是否有可能在三角形div的任何边周围添加边框，这样，如果我给div加上白色背景和黑色边框，你仍然可以看到它？我有办法做到这一点吗

JSFIDDLE：

HTML:

---

这是一种典型的方法：

---

内容

是使伪元素

：在

之前和

：在

之后可见。在上面的例子中，我使用了两个与

相关的“伪”元素。arrow-up

，我们可以用两个单独的元素来实现，但效果不太好。进一步阅读此处，请参见以下答案：

<div class="arrow-up"></div>

.arrow-up {
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}

.arrow-up:after {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    margin-top:1px;
    margin-left:2px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
}

.arrow-up:before {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid black;
}