使用 CSS 在 div 的两侧添加箭头？ [关闭]答案

【问题标题】：Adding an arrow on both sides of a div using CSS? [closed]使用 CSS 在 div 的两侧添加箭头？ [关闭]
【发布时间】：2018-08-15 06:36:16
【问题描述】：

我想要一个 div 左右两侧的箭头。像这里，但在两边：http://cssarrowplease.com/

这可能吗？

【问题讨论】：

当然是，所以...你自己试过什么？？？

标签： css css-shapes

【解决方案1】：

在.arrow 中添加一个额外的 div，您还可以在其中添加一个:before 和:after 伪类。（注意：额外的div是必须的，因为有额外的边框。边框是通过创建两个重叠的div来创建的，:before和:after）

.arrow_box { 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
    width: 200px;
}
.arrow_box:after, .arrow_box:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0;
    position: absolute;
} 
.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #88b7d5;
    border-width: 30px;
    left: 50%; 
    margin-left: -30px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #c2e1f5; 
    border-width: 36px; 
    left: 50%; 
    margin-left: -36px;
}
.arrow_box > div:after, .arrow_box > div:before { 
    top: 100%; 
    border: solid transparent; 
    content: ""; 
    height: 0; 
    width: 0;
    position: absolute;
} 
.arrow_box > div:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-top-color: #88b7d5;
    border-width: 30px;
    left: 50%; 
    margin-left: -30px; 
} 
.arrow_box > div:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-top-color: #c2e1f5; 
    border-width: 36px; 
    left: 50%; 
    margin-left: -36px;
}

<div class="arrow_box">
    <div>
        bla!<br />
        bla!<br />
        bla!<br />
        bla!<br />
        bla!<br />
        bla!<br />
    </div>
</div>

还有一个demo。

【讨论】：