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

Using PHP to store cookies

<?php $_SESSION['name'] = array($_POST['name']) ; $n = $_SESSION['name'][0]; setcookie('name[0]',$n,time()+(60*30)); ?> <html> <form class="contact100-form validate-form" action="step-3.php" > ...

phphtmlcookies

Javascript encounters an unforeseen < token

I encountered an unexpected token < error in my JavaScript file. Despite checking the code using JSHint, I couldn't find any issues that could resolve the problem. I attempted to place the JavaScript code in a separate file and also tried embeddin ...

javascripthtmlajax

ReactJs: Struggling to programmatically set focus on an element with React.createRef()

Looking to detect when a user clicks on an arrow using the keyboard? I stumbled upon the Arrow Keys React react module. To make it work, you need to call the focus method on a specific element. Manually clicking on an element does the trick: https://i.s ...

javascripthtmlreactjsdomautofocus

Can search criteria be saved for later use?

I operate a classifieds website that allows users to search through ads. I am contemplating ways to save search criteria so that users can easily reuse them for future searches without having to input the same details over and over again. For instance, th ...

phpsqlmysqlhtmlsearch

Creating React components with scoped CSS imports

I am facing an issue with my component's CSS structure and import method. About/style.css .AboutContainer { # Some style } p > code { # Some style } When importing the CSS in the component: About/index.js import './style.css&apos ...

cssreactjs

Creating a Vertical Stack of Divs Using HTML and CSS

I've attempted various methods to align the links vertically in the left-most column, but without success. Any suggestions or advice would be greatly appreciated! http://jsfiddle.net/adRuz/112/ .box { background: #E8E8E8; border-radius: 8px ...

htmlcssstack

Is there a way to detect if JavaScript is disabled using a unique CSS selector?

Does anyone know of a CSS selector that can be used when JavaScript is disabled? I'm not referring to the noscript tag, but specifically in CSS. ...

csscss-selectors

What sets npm install apart from manual installation?

I've been exploring requirejs recently. I'm trying to decide between installing it using npm install requirejs or manually downloading it from the website. Are there any differences between the two methods? Are there any advantages or disadvantag ...

javascripthtmlnpminstallationrequirejs

Enhanced Interactivity: jQuery UI Dialog Button Transforms Position upon Mouse Hover

I am utilizing the jQuery UI dialog feature and implementing buttons using jQuery in the following manner: $("#151").dialog({ autoOpen: false, autoResize: true, buttons: { "OK": function ...

jquerycssjquery-uistylesheet

Is there a way to customize the checkout page using JavaScript?

I'm working on a checkout page where fields need to change based on a selected radio button. There are two options: A and B. When A is selected, I want certain fields to remain visible while others disappear, and vice versa for option B. Although I p ...

javascripthtmlcsswordpressweb

Blurry text can be a common occurrence when applying the transform(-50%,-50%) function to center

I have found a way to center a section using the following code: <div class="clock-section"> <h5 id="clock-title">We will be arriving soon</h5> <hr class="hr" id="cdhr"> </div> Here is ...

htmlcsstransformblur

Using the onMessage event in React Native WebView does not seem to have any functionality

I'm having trouble with the onMessage listener in React Native's WebView. The website is sending a postMessage (window.postMessage("Post message from web");) but for some reason, the onMessage listener is not working properly. I can't figure ...

javascripthtmlreact-nativewebview

The datepicker feature mysteriously vanishes when using Safari browser

When I utilize the jquery ui datepicker (range) and open my datepicker, if I scroll down the page, the calendar disappears. This issue seems to only occur on Safari browsers with mobile devices. Has anyone else experienced this problem? Would someone be ...

jqueryhtmlcss

Are HTML files and PHP generated files cached differently by web browsers?

My current setup involves Nginx as a web server and Firefox to check response headers. I added two files on the server - test.html and test.php, both containing the same content. In the Nginx config file, I have set the expires directive to 30d in the serv ...

phphtmlcachingnginx

Tips for adjusting text placement within table cells without altering the original dimensions of the td element?

In my simple HTML table, I am trying to align the text in all columns to the right side in the second row. After exploring this question and this one, which suggest setting box-sizing: border-box;, I found that the desired result was not achieved. The widt ...

htmlcsshtml-table

Adjusting the transparency of one element and rotating another element that are the same size

This issue is driving me nuts: I'm attempting to rotate the border of a circle element and simultaneously adjust the opacity of the circle overlay when a user hovers over it. However, in my current setup, only the opacity changes: <div id="main-c ...

htmlcss

Problem with the overflow setting of a specific div

My website is currently hosted on a test server at medexcel.comeze.com. However, I am encountering an issue where the overflow of the top div is no longer hidden when I hover over a menu button in the top bar. This results in the bottom right corner of th ...

jquerycss

Responsive background image not displaying properly

The developer site can be found at http://www.clhdesigns.com/cliwork/wintermeresod/about.php I am encountering an issue where the background image on the home page scales perfectly, but on the about us page it does not scale at all. I am seeking a solutio ...

htmlcss

Enhancing User Experience with CSS Transitions for Faster Page Loading

Recently, I stumbled upon a captivating website that has left me in awe - . The mesmerizing aspect of this site lies in the seamless and fluid animations that gracefully transition when navigating between pages. I find myself yearning to understand the int ...

jquerycss

Disappearing sticky-top navbar in Bootstrap when scrolling

I'm having trouble with the navbar on my website. Currently, it sticks to the top until I scroll out of the hero-image and then disappears. I would prefer the navbar to remain present throughout the entire page. Any suggestions on how to achieve this? ...

htmlcsstwitter-bootstrapbootstrap-4