使用CSS在div的两侧添加箭头?

前端之家收集整理的这篇文章主要介绍了使用CSS在div的两侧添加箭头?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在div的左侧和右侧有一个箭头.像这里,但双方: http://cssarrowplease.com/

那可能吗?

解决方法

在.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,0); 
    border-top-color: #88b7d5;
    border-width: 30px;
    left: 50%; 
    margin-left: -30px; 
} 
.arrow_Box > div:before { 
    border-color: rgba(194,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.

原文链接:https://www.f2er.com/css/217376.html

猜你在找的CSS相关文章