I'm trying to add a border to div with top triangle
issue is border is not getting applied to the triangle part
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>
I dont want to add a css box shadow.
I need a border.
jsFiddle
You can use position: absolute on triangle element and set top and right properties to 0. You can also just use pseudo-element with absolute position for triangle. Below is another example with triangles in all corners.
Actually the "triangle part" is a border itself, that's why you can't apply a CSS border to it, However there's a workaround.
use the :before
pseudo-element to create another triangle bigger than the first and apply your border color to it.
.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>
Just take off this
.info-panel:after {
border-bottom-color: #FFFFFF;
}
It is overriding border green on it.
check this snippet
.info-panel {
display: block;
position: relative;
background: #FFFFFF;
padding: 15px;
border: 1px solid #DDDDDD;
margin-top: 20px;
}
.info-panel:before {
border: 1px solid #DDDDDD;
}
.info-panel:after {
content: '';
display: block;
position: absolute;
left: 20px;
bottom: 100%;
width: 0;
height: 0;
border-bottom: 10px solid green;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
<div class="info-panel">
Testing
</div>
Hope it helps
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With