我正在尝试使用顶部三角形向div添加边框
问题是边框未应用到三角形部分
body {
background-color: #F3F5F6;
}
.info-panel {
display: block;
position: relative;
background: #FFFFFF;
padding: 15px;
border: 1px solid #DDDDDD;
margin-top: 20px;
}
.info-panel:after {
content: '';
display: block;
position: absolute;
left: 20px;
bottom: 100%;
width: 0;
height: 0;
border-bottom: 10px solid #FFFFFF;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}<div class="info-panel">
Testing
</div>我不想添加css框阴影。
我需要一个边界。
实际上，“三角形部分”本身就是边框，这就是为什么您不能对其应用CSS边框的原因，但是有一种解决方法。
使用:before伪元素创建另一个三角比第一大并应用边框颜色吧。
.info-panel {
display: block;
position: relative;
background: #FFFFFF;
padding: 15px;
border: 1px solid #DDDDDD;
margin-top: 20px;
}
.info-panel:before, .info-panel:after {
content: '';
display: block;
position: absolute;
bottom: 100%;
width: 0;
height: 0;
}
.info-panel:before {
left: 19px;
border: 11px solid transparent;
border-bottom-color: #ddd;
}
.info-panel:after {
left: 20px;
border: 10px solid transparent;
border-bottom-color: #fff;
}<div class="info-panel">
Testing
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句