"Triangle Emblazoned Speech Bubble on a Clear, See-Through Back

I'm currently working on creating a semi-transparent speech bubble with a border. I'm using a ::before element for a larger triangle shape and a ::after element for a smaller triangle shape that sits on top to create the illusion of a border. However, the ::before element is causing issues as it is visible and affecting the transparency. Does anyone have a solution to this problem?

.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>

htmlcss

Answer №1

One useful technique in this situation is a skew transformation:

.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>

Answer №2

Consider using a solid color without transparency by utilizing a color-picker tool. This may help resolve your issue.
Check out the following code snippet for reference:

.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>

Answer №3

Check out the SVG I made for you. Let me know if it's useful!

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

To link the information within the angularJS controller

I've recently generated a div element dynamically within the controller function of my AngularJS application. However, I'm facing an issue where the data is not binding as expected inside this div element. Here is a snippet of my code: function ...

javascripthtmlangularjs

The functionality of activating a button is not functioning as expected in AngularJS framework

Next to the question I have linked here, I am exploring a different approach. As a beginner in AngularJS/Cordova/Ionic, my goal is to achieve different outcomes when the "Eingepasst" button is clicked, each with unique logic compared to "Gewonnen" or "Ver ...

javascripthtmlcssangularjssass

Incorporating Button Value from Anchor Tag Title Upon Page Load

Currently, I am working on a real estate project and facing an issue with a contact modal box. My goal is to extract the title from tag "a" and place it as the button value in the modal box. English isn't my strong suit, so please excuse any errors i ...

javascriptjqueryhtml

I am looking to provide customized edits to particular h1 tags

Is it possible to apply custom formatting to an h1 tag using CSS for a specific section of the webpage? For example, instead of just using: h1{ } I am looking to do something like this: .specific.h1{ } Any suggestions on how to ...

htmlcss

Personalize the breakpoints of Bootstrap 4's grid system

In my project, I am facing a situation where I need a 1280 breakpoint to switch from desktop to tablet, instead of the xl breakpoint at 1200 as defined in Bootstrap. How can I globally change the xl breakpoint in Bootstrap without recompiling from the sour ...

csstwitter-bootstrapsassresponsive-designbootstrap-4

Utilizing data binding in AngularJS upon choosing an item from a drop-down menu

I'm new to AngularJS and would appreciate any help on how to accomplish the following task: When I select an option from a dropdown list, I want the relevant information to be displayed in readonly fields. Here is an attachment for reference: https:// ...

htmlangularjsjson

The descendant selector in CSS fails to apply changes to the element

I am struggling to modify the border of a specific descendant element and so far I have not been successful. Despite using the correct descendant selector in the HTML below, the style change is not taking effect. If anyone has any insights on what could be ...

htmlcss

Customize the background image in your Windows 8 app developed with HTML

While working on my app with the grid app template, I placed an image in the images folder. However, when I attempted to change the background image, it didn't seem to take effect. This is the code snippet that I used: HMTL <div id="contenthost" ...

htmlcssvisual-studio-2012windows-store-apps

Positioning Images with CSS Backgrounds

I am looking to create a fluid background that stretches widthwise, while adjusting its height based on the content. If the content is smaller, I want the background to be truncated. However, if there is a lot of information, I would like the background to ...

htmlcss

Is there a way to make the embed tag match the size of the div tag?

Is there a way to ensure that the size of the embed tag matches that of the div tag? I am able to adjust the size of the embed tag to match the div tag, but I want to maintain the full resolution of the embed tag (which is used for a webcam). <div st ...

htmlcss

Centering a button within a table-cell through movement

I'm facing an issue with aligning a button placed inside a table cell. The table setup is as follows: <b-table v-if="rows.length" :thead-tr-class="'bug-report-thead'" :tbody-tr-class="'bug-report-tbody& ...

htmlcssvue.jsbuttonhtml-table

What is the most reliable method for displaying an SVG shape in any color across various web browsers?

Is there a way to render a 2D SVG shape, which is flat and 100% black, in any color across various browsers? ...

csssvg

Having issues transferring values from one page to another. Any suggestions to make it work correctly?

I currently have two pages within my website, one is called details.page and the other is maps.page. In the details page, I have set up a search input as shown below : <form method="get" id="form-search" data-ajax="true" action="maps.page"> ...

javascriptjqueryhtmlajax

Tips for correctly aligning input text boxes

https://i.sstatic.net/9fVwA.jpg I have created a code for an average calculator using HTML, CSS, Bootstrap, and JavaScript. The problem I am facing is with the alignment of the input text boxes. How can I adjust them properly? The user should enter the ...

htmlcssbootstrap-5

Having trouble dividing an HTML file?

Currently, I am working on creating a very basic web page that is divided into two parts. Each part will have its own HTML file: Welcome.html & Welcome.css: <html> <head> <link rel="stylesheet" type="text/css" href="Welcom ...

javascripthtmlcssnode.js

Playing with background hues

Can anyone help me with this issue? I've been attempting to change the background color using jQuery upon document load, but it doesn't seem to be working. Any thoughts on what I might be doing wrong? http://jsfiddle.net/KczZd/2/ HTML: <d ...

javascriptjqueryhtmlcss

An easy way to incorporate an image into an HTML button

Is there a way to add an image on a button? I've been attempting to create a banner-like element for a large button, but the image doesn't seem to integrate inside the button as desired. https://i.sstatic.net/UYxEt.png I aim to have the image co ...

htmlcss

Unable to transmit form information using HTML/JavaScript/Express Node application

I'm facing a challenge in developing an app that allows me to input event information and then display it on a map. I'm encountering difficulties at the initial stage when it comes to saving the data. Even though Chrome's Inspect tool indica ...

javascripthtmlnode.jsmongoose

Properly align and position the background of the header image

I'm currently tackling an issue on my website where I need help aligning and positioning the background image in the main header section. My goal is to ensure that the image is fully visible in this area, even when viewed on mobile devices. Attached ...

htmlcssimagebackgroundposition

Angular 13: Problems arise with custom theme in Angular Material version 13

I've set up a custom theme palette for my project that works perfectly with version ^12.2.13 of Angular Material, but not with ^13.2.3. Here's the SCSS code for my custom theming: my-custom-theme.scss @import '~@angular/material/theming&apo ...

cssangularsassangular-materialangular13