css自定义边框样式（三角形或箭头）

如何为CSS边框样式创建下面的抽象模式

 /\   /\  
/  \ /  \
---------
         |\
         | \
         | /
         |/
         |\
         | \
         | /
         |/
         |\
         | \
         | /
         |/

---

PS：我不能添加图像，没有预定义的CSS规则，但是你仍然可以这样做

来，看到这个了吗

你的问题被否决了，因为你似乎没有进行研究。记住，吉夫

---

这里有一个工具可以帮助您了解它是如何完成的-

要获得单个元素周围的多个“三角形”，正如您在示例中所指出的，我认为您唯一的选择是

边框图像

属性

CSS

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:250px;
    height:300px;
    margin:25px;
    border-style: solid;
    border-width: 13px 14px 14px 12px;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
}

NB。此属性要求您有一个“基本”映像才能使用。

---

您是否尝试过研究此问题？此解决方案依赖于多个div，而这不是OP想要的。他想要多个三角形环绕一个更大的分区。嗯，他没有明确说他想要一个分区。没有。他提供的文本块表明他需要一个外部有三角形的块，使用CSS。此外，如果他愿意的话，还可以在包装器中包含内容。但他没有具体说明。我现在能想到的在容器中添加内容的解决方法之一——显然还有其他方法，但我认为最好专注于其他有成效的事情，而不是说服你。这似乎不符合“PS”要求。@我想PS评论是指他由于缺乏声誉而无法在SO上发布图片。在任何情况下，它都是CSS属性而不是内联HTML图像。可能是。。。OP不了解他的问题发生了什么是没有帮助的。无论如何+1

.wrapper{
    width:500px;
    height:500px;
    position:relative;
}
.arrow_box {
    position: absolute;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
    height:100px;
    width:40px;
    top:50px;
    left:50px;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 20px;
    margin-left: -20px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 26px;
    margin-left: -26px;
}

.arrow_box_2 {
    position: absolute;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
    border-left:none;
    height:100px;
    width:50px;
    top:-4px;
    left:30px;

}
.arrow_box_2:after, .arrow_box_2:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box_2:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 20px;
    margin-left: -20px;
}
.arrow_box_2:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 26px;
    margin-left: -26px;
}
.arrow_box_3 {
    position: absolute;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
    border-left:none;
    height:100px;
    width:45px;
    top:-4px;
    left:45px;

}
.arrow_box_3:after, .arrow_box_3:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box_3:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 20px;
    margin-left: -20px;
}
.arrow_box_3:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 26px;
    margin-left: -26px;
}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:250px;
    height:300px;
    margin:25px;
    border-style: solid;
    border-width: 13px 14px 14px 12px;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
}