使用CSS在div的两侧添加箭头？ [英] Adding an arrow on both sides of a div using CSS?

问题描述

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

I want an arrow on the left and right side of a div. Like here, but on both sides: http://cssarrowplease.com/

这是可能吗？

推荐答案

在 .arrow ，在其上添加：之前和：之后伪类。 （注意：额外的div是必要的，因为额外的边框。创建两个重叠的div ：之前和 code>）

Add an extra div inside .arrow, on which you add a :before and :after pseudo class as well. (Note: the extra div is necessary because of the extra border. The border is created by creating two overlapping divs, :before and :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>

a href =http://jsfiddle.net/LinkinTED/4Yf4B/ =nofollow noreferrer> 演示 。

And a demo.

这篇关于使用CSS在div的两侧添加箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！