Positioning css-shaped triangle - css

Question

I'm trying to place a css-shaped triangle inside a div.
Here is CSS:
/*Outer DIV*/
div.auth {
display: block;
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
/*Triangle DIV*/
div.arrow {
width: 0.5em;
height: 65%;
background-color: #000;
position: relative;}
div.arrow::after {
display: block;
content: '';
position: absolute;
left: -60%;
transform: translateY(80%);
bottom: -1em;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
}
Desired result:
https://jsfiddle.net/k1x1car4/
How can I can do the same placement in a less tricky and more precise manner?
Thank you!

Answer 1

Just use an .arrow class and a pseudo-element on the parent div.
There is no need to create actual HTML for styling in this intance.
Then position element bottom:0 and left:0. Simple!
div.auth {
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
border: 1px solid black;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(204, 204, 204);
border-left: 3px solid #ccc;
font-family: "T3";
text-align: right;
}
div.arrow {
position: relative;
}
div.arrow::after {
display: block;
content: '';
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
}
<div class="auth arrow">par Makarios, Évêque de Lampsaque</div>

Answer 2

I don't know if you are able to change div.arrow, but if so I recommend you not to use a pseudo-element at all and just put the triangle directly into div.arrow. You can then position it using
position: absolute
left: 0;
bottom: 0;
Note: You're going to have to add position:relative to div.auth in order for position:absolute to work on div.arrow.
div.auth {
display: block;
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
border: 1px solid black;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(204, 204, 204);
border-left: 3px solid #ccc;
font-family: "T3";
text-align: right;
position: relative;
}
div.arrow {
display: block;
content: '';
position: absolute;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
left: 0;
bottom: 0;
}
<div class="auth">
<div class="arrow"></div>par Makarios, Évêque de Lampsaque</div>