-1

I'm trying to make this shape in HTML/CSS, and I can't do it for the life of me. If anyone can give a heads-up, it would be much appreciated. Including JS also doesn't matter. If you can give the smallest nudge in the right direction, I would be grateful. Thanks, here's the drawing. enter image description here

  • What's your existing code? Basically, you want to draw two boxes. One for the speech bubble, and another one to be the triangular-thingy on the left (this can be done by rotating the box). Please feel free to explore [some existing questions](https://stackoverflow.com/questions/63907136/create-a-bubble-speech-rectangle-using-css). – Thammarith Apr 01 '22 at 05:36

1 Answers1

0

Please check this code

#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}
<div class="shape">

  <h2>Talk Bubble</h2>

  <div id="talkbubble"></div>

</div>
Dream180
  • 180
  • 1
  • 13