The clip-path in Div: Css is malfunctioning and not displaying correctly

I am trying to create a chat bubble using CSS with rounded corners and a bottom-right arrow. However, I am having trouble getting the arrow to display correctly.

https://i.stack.imgur.com/gVXOV.png

The CSS styling for the chat bubble is as follows:

    .right-bubble {
    margin-top: 12px;
    padding: 5px 8px;
    font-size: 13px;
    position: relative;
    background: #1e87f0;
    border-radius: 5px;
    text-align: right;
    color:white;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
    z-index: 1;
    }

    .right-bubble:after {
    width: 10px;
    height: 45px;
    bottom: 0;
    background: #1e87f0;
    right: -4px;
    clip-path: polygon(0 70%, 0% 100%, 100% 100%);
    }

This is how the HTML markup for the chat bubble looks like:

    <div class="right-bubble">
       <p>Welcome, adfdf adsfsdf adsfsdffa adsfdfadsf asdfsdf Please 
       wait. Our agent will join you shortly.asdfadsf adfd asdff asdf 
       fasdfdsf
       </p>
    </div>

At the moment, only the rounded corner box is displaying and the bottom right arrow is missing. Any suggestions on how to fix this issue?

htmlcss

Answer №1

<style>
.right-bubble {
    margin-top: 12px;
    padding: 5px 8px;
    font-size: 13px;
    position: relative;
    background: #1e87f0;
    border-radius: 5px;
    text-align: right;
    color:white;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
    z-index: 1;
    width:50%;
    border-bottom-right-radius: 0;
}

.right-bubble p{
    text-align: left;
    margin: 0;
    padding: 10px;
}

.right-bubble:after {
    width: 10px;
    height: 45px;
    bottom: 0;
    background: #1e87f0;
    right: -4px;
    clip-path: polygon(0 70%, 0% 100%, 100% 100%);
}
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 00px solid transparent;
    border-left: 20px solid #1e87f0;
    position:absolute;
    right:-5%;
    bottom:0;
}
</style>

<!-- HTML -->
<div class="right-bubble">
    <p>Hello there! Here's your personalized message.</p>
    <div class="arrow-right"></div>
</div>

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

How can I ensure the footer stays at the bottom of the page using a table layout?

For quite some time now, I've been working on achieving a table layout with a sticky footer. My specific requirement is for the footer to remain fixed at the bottom even when zooming in or out. However, whenever I try to adjust the zoom level of the w ...

css

KineticJs: Enhancing Rotation with Multitouch Capability

Currently, I have a click event implemented in my code that rotates my puzzle piece by 90 degrees when clicked. However, I would like to change it from a mouse click to a touch event. How can I achieve this? Thank you. piecesArray[i][j].shape.on("mous ...

javascripthtmlrotationkineticjsmulti-touch

jquery carousel slider dynamically append

I have been tasked with creating a dynamic carousel using jQuery AJAX, and my supervisor recommended that I utilize the .append() method. Below is the HTML code for my carousel: <div id="myCarousel"> </div> <div cla ...

javascriptjqueryhtmlajaxtwitter-bootstrap

The <div> tag fails to comply with the Display: inline CSS property

I need help with a web development issue as I am new to this field. My problem is that I am trying to display three divs next to each other, but despite applying display:inline-block to them, they still appear stacked on top of each other instead of side b ...

htmlcssinlinedisplay

Upon calling the method, an undesirable page refresh occurs

I have been experimenting with dynamically generating additional input fields using vuejs when a user clicks a button. Initially, my code functions properly by creating more fields, but unexpectedly the page refreshes automatically, resetting the user&apos ...

javascripthtmlvue.jsv-for

AngularJS is receiving an array of null inputs

I have a form where data from my DB is displayed through WebApi. One of the controls will contain an array of values. There is a scenario where the user can edit and save it using the PUT function. Controller : $scope.Put= function () { $scope.i ...

javascripthtmlangularjsasp.net-web-api

Using Angular to scroll within a <div> that is obstructed by other <div>s and concealed by

I am currently in the process of developing a website using Angular. I have implemented a card feature that allows for text selection from a menu on the left side. The texts are displayed using the *ngIf directive. However, I encountered an issue where if ...

htmlcssangularoverflow

Transmitting the identification number of a post with the help of J

I am currently working on a while loop in PHP that fetches associated results from a query and displays them within a class identified by the user who created the post. My goal is to send the id of the class to PHP, similar to how I am sending the num vari ...

phpjqueryhtmlajaxvariables

Tips for eliminating the gap separating the authentication design from the additional elements within the Laravel, Vue, and Inertia framework

I'm currently working with Laravel and Vue using Inertia. When I log into the system, the authentication layout creates a space at the top of the page. How can I resolve this issue? Here is an image highlighting the space I need to remove, marked wit ...

htmlcsslaravelvue.jsinertiajs

Adapt button functionality according to selected dropdown value in Angular

I have implemented a License Key generation process in my application where user input is used to create a unique key that is then passed to the Java backend. The code snippet for generating the key is as follows: @PostMapping("/generate") public Li ...

javahtmlangulardrop-down-menu

With Firefox, when submitting a form only the final repeated region value is $_POSTed and not all of them

There seems to be an issue with the code below when running it in Firefox. The problem occurs when passing the URL variable UserName. In Firefox, only the last record is being used from the record-set, regardless of which button is clicked. This page utili ...

phphtmlfirefox

Clicking on a marker in Google Maps will display the address

I have a map that contains several markers, each designated by their latitude and longitude coordinates. I would like to be able to see the address associated with each marker when I click on it. However, I am currently experiencing an issue where nothing ...

javascripthtmlgoogle-mapsmapsreverse-geocoding

Restrict the child's height to the remaining space within the parent container

I'm attempting to divide the viewport's height between two divs. In the top div, there is a small div followed by a larger div that should scroll if it doesn't fit within the remaining space of the parent div. Below is the structure of my HT ...

htmlcss

What are the steps for implementing a two-column layout in reveal.js?

When creating my slides using reveal.js, I write them in Markdown code. I am now looking to present my content (text, bulleted lists, or images) in a traditional two-column text layout. While I am open to a more complex initial setup, I want to ensure that ...

cssmarkdownreveal.js

I am experiencing difficulty loading my image in HTML5

Despite using the correct syntax and having my image file in the same folder as my HTML document, I am facing an issue where the programmed image does not appear on the page when I load the document. What could be causing this? In this case, both my HTML ...

htmlimage

Button to access overlay menu on my map with OpenLayers 3

I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...

javascriptjqueryhtmlcss

Achieving Vertical Centering of Text in Bootstrap 5 Buttons with Flex Box to Prevent Overlapping Icons

How can I prevent the text on a Bootstrap 5 button with horizontally and vertically centered text, along with a right aligned icon, from overlapping when it wraps? Additionally, how do I ensure that the icon stays vertically centered when the button text w ...

javascripthtmlcssbootstrap-5

Managing multiple carousels simultaneously using the middle mouse button in Swiper.js

I am currently utilizing 5 carousels on my screen, all of which are operated by the same navigation buttons. In addition to this, I require the ability to control them using the middle mouse scroll. However, when I activate the mouse wheel control, only ...

javascriptcsscarouselswiper.js

Aligning content in CSS for cross-browser compatibility with Internet Explorer and Chrome

My CSS grid has grid items that can easily be centered in Chrome by using the justify-items:center property, creating a magical effect. However, this solution does not work in Internet Explorer as the items remain stuck to the left side. For reference: ht ...

htmlcssgoogle-chromeinternet-explorer-11css-grid

Issue encountered while trying to exhibit jpg image content from server side on html

I am attempting to display an image from server-side data using an Ajax call. The data stored on the server looks something like this: "ÿØÿàJFIFÿÛC4­¶¸UOHlʵcBò)3¹_È'I4~&éüÿ§Ú<ã©ã4>'Øù¿ÇÄmËCÈgÚsZ¥ë" Upo ...

javascripthtmlangularjsajax