CODEWITHSUNDEEP
htmlcss
Herbot Sikaro
Herbot Sikaro

Reputation: 199

How to make a curved triangle that has the same box-shadow as the other element?

I'm trying to create a curved triangle to be put next to a 'chat message box'.

See this example:

enter image description here

As you can see in between the 'E' and the actual message box there is a little 'triangle' but its shape isnt made of a straigt line, instead it's a little bit curved.

On top of that, I would like to add a box-shadow to my triangle.

Here's the code that I have tried:

width: 0px;
height: 0px;
border-top: 32px solid transparent;
border-bottom: 0px solid transparent;
border-right: 22px solid white;
position: absolute;
left: -10px;
bottom: 0;
box-shadow: 0 2px 6px rgba(0,0,0,.9);

And it gives me this result: (I have purposefully added a super dark box-shadow so that it easier to understand my problem.)

enter image description here

So, to recap, what I'd like to achieve:

Thanks !

Upvotes: 2

Views: 135

Answers (1)

Temani Afif
Temani Afif

Reputation: 273750

Based on a previous answer, you can add a drop-shadow filter to a shape created using radial-gradient for the curve:

.userMsgBottom {
  position: relative;
  color:#fff;
  max-width: 250px;
  background-color: #2e7384;
  margin: 30px 50px;
  padding: 10px;
  border-radius: 6px;
  filter:drop-shadow(0 0 5px #000);
}

.userMsgBottom:after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: -23px;
  width: 30px;
  height: 25px;
  background: radial-gradient(circle at top right, transparent 60%, #2e7384 62%);
}

.left.userMsgBottom:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: -23px;
  width: 30px;
  height: 25px;
  background: radial-gradient(circle at top left, transparent 60%, #2e7384 62%);
}
<div class="userMsgBottom">
  Some text here Some text here Some text here
</div>

<div class="userMsgBottom left">
  Some text here Some text here Some text here
</div>

Safari doesn't support the syntax with at, here is another syntax for better support:

.userMsgBottom {
  position: relative;
  color:#fff;
  max-width: 250px;
  background-color: #2e7384;
  margin: 30px 50px;
  padding: 10px;
  border-radius: 6px;
  filter:drop-shadow(0 0 5px #000);
}

.userMsgBottom:after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: -23px;
  width: 30px;
  height: 25px;
  background: 
    radial-gradient(circle, transparent 60%, #2e7384 62%) bottom left/200% 200%;
}

.left.userMsgBottom:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: -23px;
  width: 30px;
  height: 25px;
  background: 
    radial-gradient(circle, transparent 60%, #2e7384 62%) bottom right/200% 200%;
}
<div class="userMsgBottom">
  Some text here Some text here Some text here
</div>

<div class="userMsgBottom left">
  Some text here Some text here Some text here
</div>

Upvotes: 2

Related Questions