Jordyn Jordyn - 24 days ago 22
CSS Question

Adding a border to div with top triangle

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

Answer

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>

Comments