Making an arrow and a column using Css [duplicate] - css

Question

This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 11 months ago.
I have a task to do the following figure. but I don't know how to design the arrow alongside the column.
my code:
p {
background-color: #eee;
padding: 20px;
margin-left: 110px;
width: 400px;
}
p::before {
content: attr(data-person);
background-color: #ddd;
position: absolute;
left: 5px;
margin-top: -15px;
padding: 15px;
display: inline-block;
width: 45px;
text-align: center;
}
p::after {
content: "";
background-color: #e84747;
padding: 5px;
height: 48.56px;
position: absolute;
left: 108px;
margin-top: -20px;
}
<p class="one" data-person="Osama">This Is Very Very Long Comment Number One</p>
<p class="two" data-person="Ahmed">This Is Very Very Long Comment Number Two</p>
<p class="three" data-person="Sayed">This Is Very Very Long Comment Number Three</p>
I used my before and after properties, if I do the arrow I won't do the column and vice versa.

Answer 1

Easiest way is to put a left border on the p and that frees up the ::after pseudo element for the triangle. Make sure you put position: relative on the p and then all the position: absolutes are based on that.
The actual triangle is created by making a series of borders transparent and one colors, and with the same size (to make a square).
The way this all works is that the borders meet at the corners as mitres (like a picture frame) and so when all of them are the same - its as if there is a square with 4 inward facing trangles and only one of the m has the color - hence the colored triangle.
p{
background-color: #eee;
padding: 20px;
margin-left: 110px;
width: 400px;
border-left: solid 5px #e84747;
position: relative;
}
p::before{
content:attr(data-person);
background-color: #ddd;
position: absolute;
left: -110px;
margin-top: -15px;
padding: 15px;
display: inline-block;
width: 45px;
text-align: center;
}
p::after{
content: "";
position: absolute;
left: -15px;
top: calc(50% - 10px);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #e84747;
}
<p class="one" data-person="Osama">This Is Very Very Long Comment Number One</p>
<p class="two" data-person="Ahmed">This Is Very Very Long Comment Number Two</p>
<p class="three" data-person="Sayed">This Is Very Very Long Comment Number Three</p>