Creating a Curved Border with Clip Path in CSS

Hey there! I'm currently attempting to add a speech bubble at the bottom left using clip-path, but I'm struggling to adjust the pixels just right to achieve the clear and exact look I want. Can someone provide suggestions on how to accomplish this or offer an alternative method?

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: 147px!important;
  height: auto;
  background: transparent;
  border: 4px solid white;
  border-radius: 10px 10px 10px 0;
  position: relative;
  border-bottom-color: transparent;
}

.tolltip:after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -38px;
  width: 13px;
  height: 72px;
  clip-path: polygon(0 0, 4px 0, 4px 37px, 53px 0, 40px 0, 0px 49px);
  background: white;
}

.tolltip:before {
  content: "";
  position: absolute;
  left: 8px;
  right: 0px;
  bottom: 0;
  border-bottom: 4px solid white;
}
<div class="tolltip">
  <h3>content</h3>
</div>

Here's what I'm aiming for:

javascripthtmlcss

Answer №1

Presenting an alternative approach:

.callout {
  max-width: 200px;
  margin: auto;
  position: relative;
  padding: 10px;
}

.callout:before,
.callout:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border: 5px solid #fff;
}

.callout:before {
  top: 0;
  right: 0;
  border-radius: 15px 15px 15px 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 
     25px 100%,  
     25px calc(100% - 10px), 
     0    calc(100% - 10px), 
     0    100%);
}

.callout:after {
  top: 50%;
  width: 20px; 
  border-top: 0;
  border-right: 0;
  transform-origin: right;
  transform: skewY(-40deg); 
}

body {
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
<div class="callout">
  <h3>content</h3>
</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

Arranging unrelated divs in alignment

http://codepen.io/anon/pen/Gxbfu <-- Here is the specific portion of the website that needs alignment. My goal is to have Onyx Design perfectly aligned with the right side of the navbar, or to have the navbar extend up to the end of "Onyx Design". The ...

javascripthtmlcss

Generating hierarchical structures from div elements

Looking for guidance on how to parse a HTML page like the one below and create a hierarchical Javascript object or JSON. Any assistance would be much appreciated. <div class="t"> <div> <div class="c"> <input t ...

javascriptjqueryjson

How to choose `optgroup` in Vue 1.x

In previous iterations of vue.js, developers had the ability to generate a dynamic select list utilizing optgroups similar to the example found here. In the latest versions of vue, the documentation suggests using v-for within the options instead of optgr ...

javascriptvue.js

Webpage expands its reach beyond the confines of the HTML element

I've recently added a background gradient to my webpage to make it easier on the eyes, but now I've noticed that the page extends past the <html> element and continues scrolling. This also causes the background gradient to repeat below the ...

htmlcss

The functionality of CKEditor is compromised when used in conjunction with React Material-UI

I've been struggling with integrating Material UI and CKEditor5. The issue I'm facing is that CKEditor doesn't seem to be working properly. Despite trying to apply editor features like bold or italic, nothing changes on the screen. However, ...

cssreactjsmaterial-uickeditorckeditor5-react

Attempting to run driver.execute_script(gooogletag but no response was received

I have been attempting to receive responses in the console from the browser when running googletag parameters with Selenium, but unfortunately I have not been successful. Even after trying .execute_async_script('googletag.pubads()') and putting ...

javascriptpython-3.xselenium

Clicking within the text activates the dropdown menu, but clicking outside the text does not

My custom drop down menu is not functioning properly. When I click on the text, it successfully links to another place, but when I click beside the text, it does not link. Can you please help me identify what's wrong here? Your assistance would be gre ...

javascriptphpjqueryhtmlcss

Ways to determine if your code is written in ES6

After completing a lot of Javascript coding, I just learned about the existence of various JS 'versions' such as ES5 and ES6. My project is now up on Github, and someone advised me to convert my ES6 code to ES5 using Babel. The problem is, I&ap ...

javascriptecmascript-6babeljs

Should I include one of the dependencies' dependencies in my project, or should I directly install it into the root level of the project?

TL;DR Summary (Using Lodash as an example, my application needs to import JavaScript from an NPM package that relies on Lodash. To prevent bundling duplicate versions of the same function, I'm considering not installing Lodash in my application' ...

javascriptnode.jsnpm

Organizing entries based on the quantity of attached documents

I am currently working with mongodb and mongoose. I have a situation where users can create ratings and reviews for products. I want to retrieve the review of the product that has received the highest number of votes. Is this achievable in mongo? The data ...

javascriptnode.jsmongodbsortingmongoose

What is the best way to resize a div located below a dynamic div in order to occupy the available space?

My website has a dynamic div1 and a scrollable table inside div2. I need the div2 to take up the remaining height of the window, while ensuring all divs remain responsive. I've tried using JavaScript to calculate and adjust the heights on window loa ...

javascriptcssangularbootstrap-4flexbox

The issue with ng-if not functioning within ng-repeat is that the ng-if directive

My issue is with using ng-if inside an ng-repeat in AngularJS. Despite updating to the latest version on 09/27/2014, I am still unable to make it work properly. The code functions perfectly outside of ng-repeat, and also works fine inside ng-repeat when us ...

javascriptangularjsangularjs-ng-if

What is the significance of using "your-shop" as the action form without a file extension?

I've come across filenames (with file extensions) or URLs inside the action attribute of a form, but I have never seen code like this before: <form action="your-shop" name="shop_name_form" id="shop_name_form" method="post" onsubmit="return check_s ...

html

Leveraging webpack for CSS bundling

I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...

javascriptcssnode.jsnpmwebpack

New Trainee - Error: document has not been defined

Encountering an Error message while attempting to run Intern tests from the test files directory. The structure of the directory is as follows: test resources rest pickup.js cashManagement.js gitignore intern.js packages.js ...

javascriptnode.jsintern

Retrieve the ID from either a search query or an insertion operation in MongoDB

I find myself frequently using this particular pattern. It feels a bit cumbersome to make two MongoDB calls for the task, and I am curious if there is a more efficient way to achieve this. My goal is to obtain the ID of an existing document, or.. create ...

javascriptmongodbmeteor

Tips for resolving the "unsafe-eval" issue in Vue3 on the client-side platform

My app is built using Express, cors, and helmet. I have incorporated Vue3 on the client-side only, with the library file being self-hosted in the public folder. To add the module to the client-side, I simply include the following script: <script type=&q ...

javascriptexpressvuejs3content-security-policy

Adjusting the focus of an element with jQuery based on coordinates and offset values

jQuery.fn.getCoord = function(){ var elem = $(this); var x = elem.offset().left; var y = elem.offset().top; console.log('x: ' + x + ' y: ' + y); ); return { x, y }; }; This custom jQuery funct ...

javascriptjquery

Tips for dynamically resetting the dataTable

When I create a datatable and add rows dynamically based on the selected option, I encounter an issue where I need to reinitialize the dataTable every time the option is changed. To address this, I have placed the reinitialization code inside the $("#selec ...

javascriptjquerydatatables

Exploring methods to access specific values from an array containing multiple values using Lodash in Angular 4

Hey, I have an array that looks like this: [ 0: "Migration, MD" 1: "Lution, MD" 2: "Mover, MD" 3: "Dee" 4: "Prov10A" ] I would like to extract the values that contain the word "MD" in them. In other words, I want a result like this: [ 0: "Migratio ...

javascriptarraysangulartypescriptlodash