Question 262776 in Html Question posted in
Some basic documentation can be found here.

Html – Creating whatsapp type tip styles

I’ve been trying to follow this code on calculating tips – but I do not know how to create this tip at the top left/right like the whatsapp style. I’ve seen nothing like this particular method or explanation on how these shapes are created.

enter image description here

I’ve tried something like this but then I loose the border-radius

.arrow {
  --a: 15px; /* control the arrow shape */

  width: 200px;
  height: 100px;
  position: relative;
  overflow: hidden;
  background: red;
  border-radius: 10px;
  
  padding-left: var(--a); /* or padding-right */
  clip-path:polygon(0 0,100% 0,100% 100%,var(--a) 100%,var(--a) var(--a))
  /* x,y --> update all the x to (100% - x) to get the right */
}
                                <div class="arrow">
                                  contents
                                </div>

https://jsfiddle.net/4azhk38o/

.bubble {
  --r: 25px; /* the radius */
  --t: 30px; /* the size of the tail */
  
  max-width: 300px;
  padding: calc(2*var(--r)/3);
  -webkit-mask: 
    radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
      var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
    conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
      calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
    radial-gradient(50% 50%,#000 98%,#0000 101%) 
      0 0/var(--r) var(--r) space padding-box;
  background: #1384C5;
  color: #fff;
}
.left {
  --_d: 0%;
  border-left: var(--t) solid #0000;
  margin-right: var(--t);
  place-self: start;
}
.right {
  --_d: 100%;
  border-right: var(--t) solid #0000;
  margin-left: var(--t);
  place-self: end;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 20px;
  font-family: system-ui, sans-serif;
  font-size: 20px;
}
<div class="bubble left">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt </div>
<div class="bubble right">Ok, Thank you</div>
<div class="bubble left"> ut labore et dolore magna </div>
<div class="bubble right">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt </div>
Tags:

2

Answers


  1. 0

    enter image description here

    please replace this css with your css

      -webkit-mask: radial-gradient(var(--t) at var(--_d) 100%, #0000 98%, #000 102%) var(--_d) 0%/calc(100% - var(--r)) var(--t) no-repeat, conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) calc(var(--r)/-2) calc(var(--r)/-2) padding-box, radial-gradient(50% 50%,#000 98%,#0000 101%) 0 0/var(--r) var(--r) space padding-box;
    Login or Signup to reply.
  2. 0

    I used :after to create a border around empty content. Basically followed tooltip example.

    .left-message {
  position: relative;
  background-color: rgb(250, 230, 175);
  border-radius: 0px 10px 10px 10px;
  padding: 1%;
  text-align: left;
  margin-right: 50%;
}
.left-message:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 0px;
  border-width: 5px;
  border-style: solid;
  border-color: rgb(250, 230, 175) rgb(250, 230, 175) transparent transparent;
}
.right-message {
  position: relative;
  background-color: rgb(234, 250, 175);
  border-radius: 10px 0px 10px 10px;
  padding: 1%;
  text-align: right;
  margin-left: 50%;
}
.right-message:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0px;
  border-width: 5px;
  border-style: solid;
  border-color: rgb(234, 250, 175) transparent transparent rgb(234, 250, 175);
}
    <div class="left-message">
  Hello World
</div>
<div class="right-message">
  Hi there!
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search