Making an arrow and a column using Css

Question

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>