Speech Bubble with triangle & translucent background

user_7475465 0
Viewed 68

Hi I am trying to make a translucent speech bubble with a border. To make the triangle I am using a ::before element for large triangle and an ::after for a smaller one that sits on top, so it looks like it has a border. But since I want it translucent, the ::before element can be seen and ruins it. Please help me to fix this

.bubble {
  max-width: 75%;
  min-width: 200px;
  padding: 8px 12px 0 12px;
  position: relative;
  border-radius: 4px;
  text-align: left;
  margin-left: auto;
  background-color: rgba(255, 0, 0, 0.3);
  border: 1px solid black;
  border-top-right-radius: 0;
  margin-right: 16px;
}
.bubble::before, .bubble::after {
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    content: '';
    border-style: solid;
    right: 0;
    transform: translateX( 100% );
  }
  
  .bubble::before {
    border-color: black transparent transparent transparent;
      border-width: 18px 18px 0 0; 
      top: -1px;
  }
  
  .bubble::after {
    border-color: rgba(255, 0, 0, 0.3) transparent transparent transparent;
      border-width: 16px 16px 0 0; 
  }
 
<div class="bubble">
  <p>
  Hello
  </p>
</div>

css html
3 Answers

Try a same color without transparency using color-picker . It can solve your problem .
See in below snippet

.bubble {
  max-width: 75%;
  min-width: 200px;
  padding: 8px 12px 0 12px;
  position: relative;
  border-radius: 4px;
  text-align: left;
  margin-left: auto;
  background-color: rgba(255, 0, 0, 0.3);
  border: 1px solid black;
  border-top-right-radius: 0;
  margin-right: 16px;
}
.bubble::before, .bubble::after {
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    content: '';
    border-style: solid;
    right: 0;
    transform: translateX( 100% );
  }
  
  .bubble::before {
    border-color: black transparent transparent transparent;
      border-width: 18px 18px 0 0; 
      top: -1px;
  }
  
  .bubble::after {
    border-color: rgb(255, 178, 178) transparent transparent transparent;
      border-width: 16px 16px 0 0; 
  }
<div class="bubble">
  <p>
  Hello
  </p>
</div>

user_168463460

A skew transformation can help you here:

.bubble {
  max-width: 75%;
  min-width: 200px;
  padding: 8px 12px 0 12px;
  position: relative;
  border-radius: 0 0 4px 4px;
  margin-top:40px;
  border: 1px solid black;
  border-top:0;
  margin-right: 16px;
}

.bubble::before,
.bubble::after{
  content: '';
  position: absolute;
  width: 70%;
  height: 20px;
  top: -21px;
  border:1px solid;
}
.bubble::before {
  right:-1px;
  border:1px solid;
  border-width:1px 1px 0 0;
  transform-origin:bottom;
  transform:skew(-45deg);
}
.bubble::after{
  left:-1px;
  border-width:1px 0 0 1px;
  border-radius:4px 0 0 0;
}

p {
 margin-top:0;
}
<div class="bubble">
  <p>
    Hello
  </p>
</div>

user_86203330

I've created an svg for you. Would this help?

<svg
    id="ff27feca-6648-4bac-87a3-a2646769617b"
    data-name="Layer 1"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 694 178"
>
    <defs>
        <style>
            .a7bae820-8942-4935-b994-ad6a9d32b3d2 {
                fill: none;
                stroke: #000;
                stroke-miterlimit: 10;
                stroke-width: 10px;
            }
        </style>
    </defs>
    <path
        class="a7bae820-8942-4935-b994-ad6a9d32b3d2"
        d="M567.37,164H44.63A29.64,29.64,0,0,1,15,134.37V45.63A29.64,29.64,0,0,1,44.63,16H667L597,67v67.37A29.64,29.64,0,0,1,567.37,164Z"
    />
</svg>

user_100008570
Related