Add border over triangle element

Question

I am trying to create a border around a triangle. I have this so far:

JSFiddle

.myDiv {
  width: 300px;
  padding: 15px;
  text-align: right;
  background-color: lightblue;
  position: relative;
  border: 1px solid black;
}
.myDiv::before {
  content: "";
  position: absolute;
  bottom: -20px;
  right: 20px;
  border-right: 20px solid lightblue;
  border-bottom: 20px solid transparent;
}

<div class="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</div>

But I can't add a border to the before element. How can I add a border around the piece that's sticking out on the bottom ('before` element)?

(I saw this question, but I can't apply the same principle to this, since it's different shapes.)

Answer 1

Try to add an ::after with more border-width and different position bottom and right, its work very well. Don't forget to change border-color to black and low down the z-index by -1.

Example:

---

.myDiv {
  width: 300px;
  padding: 15px;
  text-align: right;
  background-color: lightblue;
  position: relative;
  border: 1px solid black;
}

.myDiv::before {
  content: "";
  position: absolute;
  bottom: -20px;
  right: 20px;
  border-right: 20px solid lightblue;
  border-bottom: 20px solid transparent;
}

.myDiv::after {
  z-index:-1;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -22px;
  right: 19px;
  border-right: 21px solid black;
  border-bottom: 21px solid transparent;
}

<div class="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</div>

Fiddle demo