I need to create right arrow. See the images below:
The problem is that the div has a variable width because of .row (Bootstrap). How can I give the arrow (:after element) the appropriate width so that it will still be responsive?
My work so far:
https://jsfiddle.net/rafaelvida/8oLxz7mv/11/
.bg-orange {
background: #C57B10;
}
.border-orange {
border: 3px solid #C57B10;
}
.cursor-pointer {
cursor: pointer;
}
.small-sm {
font-size: 70%!important;
}
.chat-atual {
border: 3px solid #C57B10!important;
position: relative;
}
.chat-atual:after {
content: "";
position: absolute;
right: -4%;
bottom: 5%;
background-color: #C57B10;
padding-bottom: 18%;
width: 18%;
transform-origin: 70% 0%;
transform: rotate(-45deg);
z-index: 1;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet"/>
<div class="row w-25 bg-orange text-uppercase py-1 px-3 mt-4 cursor-pointer link-chat chat-atual" id="chat-geral" data-para="0">
<div class="col-2 my-auto p-lg-2 p-1">
<i class="fa fa-user"></i>
</div>
<div class="col-10 my-auto p-lg-2 p-1 pl-3">
<small class="small-sm">
<strong>Chat geral</strong>
</small>
</div>
</div>