CODEWITHSUNDEEP
javascripthtmlcss
Djaouad
Djaouad

Reputation: 22794

Add a border to an inner triangle

I have a div with a triangle inside, like so :

#inner-div {
  width:200px;
  height:200px;
  background-color:black;
  position:relative;
  border:2px solid red;
}
#triangle {
  border-right:15px solid transparent;
  border-left:15px solid transparent;
  border-bottom:15px solid white;
  position:absolute;
  bottom:0px;
  left:50%;
  margin-left:-13.5px;
}
<div>
  <div id="inner-div">
    <span id="triangle"></span>
  </div>
</div>

But what I want is for that the red border to not continue straight, but to somehow follow the triangle's path and curve in with it. Is there a way to do so using only CSS (no images).

PS : I know there are questions in SO similar to this one, but the answers to those are not cross-browser, they're only WebKit, what I want is a cross browser solution.

Upvotes: 2

Views: 104

Answers (1)

joshnh
joshnh

Reputation: 8734

You can do this using a pseudo-element: http://codepen.io/joshnh/pen/5e1c4f87107511497a63ca8a68e5804b

<div class="inner-div">
    <span class="triangle"></span>
</div>

.inner-div {
  width:200px;
  height:200px;
  background-color:black;
  position:relative;
  border:2px solid red;
  z-index:-1;
}
.triangle {
  border-right:15px solid transparent;
  border-left:15px solid transparent;
  border-bottom:15px solid white;
  position:absolute;
  bottom:-2px;
  left:50%;
  margin-left:-15px;
}
.triangle:after {
  border-right:18px solid transparent;
  border-left:18px solid transparent;
  border-bottom:18px solid red;
  content:'';
  position:absolute;
  left:-18px;
  bottom:-15px;
  z-index:-1;
}

Upvotes: 4

Related Questions