Add tooltip arrow with border only background color should be transparent using css

Question

I'm trying to add a tooltip arrow at the bottom left. Here I use pseudo-classes I want this should be transparent but when I give transparent to :before white color is coming to the top. I had tried but unable to achieve the desired output. Can anyone suggest to me how can I achieve this output. Any help will be appreciated.

body {
  background-image: url('https://i.ibb.co/wcTv3Jf/download.jpg');
  display: flex;
  justify-content: center;
  align-items: center;
}

.tolltip {
  width: 250px;
  height: 150px;
  background: #80808000;
  border: 3px solid white;
  border-radius: 10px 10px 10px 0;
  position: relative;
}

.tolltip:after,
.tolltip:before {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -40px;
  width: 40px;
  height: 40px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.tolltip:before {
  background: #fff;
}

.tolltip:after {
  background: #80808000;
  bottom: -32px;
  width: 38px;
  left: 0px;
}

<div class="tolltip">
  contnet
</div>

Desired output

What exactly is the problem? There is a little red triangle / arrow at the bottom left in your snippet. — Wendelin, Mar 02 '21 at 13:28
just add triangle, you can do it from border or using clipPath. — Robert, Mar 02 '21 at 13:29
@ Wendelin here inside left arrow empty space it will not fill with background color I had tried using border but not getting like as shown in the figure. — Husna, Mar 02 '21 at 13:46

Robert · Accepted Answer · 2021-03-07T01:11:59.613

One of solutions

body{
  background: darkgray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tolltip{
  width: 250px;
  height: 150px;
  background: gray;
  border: 3px solid white;
  border-radius: 10px 10px 10px 0;
  position: relative;
}

.tolltip:after,
.tolltip:before{
  content: "";
  position: absolute;
  left: -3px;
  bottom: -40px;
  width: 40px;
  height: 40px;
  background: red;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: white;
}
.tolltip:after{
  background: gray;
  bottom: -32px;
  width: 38px;
  left: 0px;
}

<div class="tolltip">
contnet
</div>

Edit after updating question.

body{
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,9,49,1) 35%, rgba(0,212,255,1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tolltip{
  width: 250px;
  height: 150px;
  background: transparent;
  border: 3px solid white;
  border-radius: 10px 10px 10px 0;
  position: relative;
  border-bottom-color: transparent;
  //
  padding: 20px;
}


.tolltip:after{
  content: "";
  position: absolute;
  left: -3px;
  bottom: -38px;
  width: 40px;
  height: 40px;
  background: red;
  clip-path: polygon(0 0, 3px 0, 3px 38px, 36px 0, 40px 0, 0px 45px) ;
  background: white;
}
.tolltip:before{
  content: "";
  position: absolute;
  left: 33px;
  right: 0px;
  bottom: 0;
  border-bottom: 3px solid white;
}

<div class="tolltip">
   <h3>content</h3>
</div>

here you remove grey color and add transparent than the :after bg also transparent. Because of this :before the white color is showing I'm adding this tooltip above the image — Husna, Mar 02 '21 at 14:17

Add tooltip arrow with border only background color should be transparent using css

1 Answers1