Ich versuche, einen Rahmen um ein Dreieck zu erstellen. Ich habe das bisher:

.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>

Aber ich kann dem @ keinen Rahmen hinzufügbefore Element. Wie kann ich einen Rand um das Teil einfügen, das am unteren Rand hervorsteht ("before" -Element)?

(Ich sahdiese Frag, aber ich kann nicht dasselbe Prinzip anwenden, da es sich um verschiedene Formen handelt.)