Creating a curved div with clip-path using Tailwind CSS

I would like to create a design similar to this

https://i.sstatic.net/JghaP.png

Using clip path and stacked components, I have managed to achieve the following look with this code snippet:

<div className="relative w-full lg:h-[220px] 2xl:h-80">
                  <div className="absolute w-full lg:h-[220px] 2xl:h-80 bg-[#2f3030] mt-10 p-3 [clip-path:polygon(0_0,65%_0,71%_18%,100%_18%,100%_100%,0_100%)]"></div>

                  <div className="absolute w-full right-0 top-0 bg-[#ff0000] lg:h-[220px] mt-10 2xl:h-80 [clip-path:polygon(67%_0,100%_0,100%_15%,72%_15%)]"></div>
                </div>

https://i.sstatic.net/t48L0.png

However, my challenge now is how to round the edges and add a gradient border similar to the first image. Can anyone help me with this?

cssnext.jstailwind-csstailwind-ui

Answer №1

Encountering a similar problem, I found that using only Tailwind was not sufficient for resolving it. As a workaround, I decided to define a new class called .clip-path (or any other desired name) in my globals.css file and then assign this class to the corresponding div element.

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

Display a tooltip when you click on a different element

I have a unique feature that I want to implement on my website. The idea is to display a tooltip when a user clicks on a specific div with the same ID as the tooltip. This will be particularly useful for interactive questions where users can click and reve ...

jqueryhtmlcsstooltip

What is the best way to resize a div to fit its content if 'clear:both' and 'float:left' are not working as desired?

I've been struggling to find a solution for an issue with my HTML. I have three 'divs' that need to display different information in their own line, enclosed in a parent element with a centered border. Despite trying solutions like inline-bl ...

htmlcssvue.jscss-floatwidth

Limiting the overflow on two circular elements

I tried to create a triangle with overflow hidden to cover the parts that extend beyond the two circles, but I am only able to display one circle and not two.... https://i.sstatic.net/9ohAZ.png <div class="big_rond"> <div class="small_ron ...

htmlcss

Adding CSS files to a JSP page in a Struts2 application

Hello, I am currently learning Java and working on a Struts2 project. I have added a stylesheet in the following path: /WEB-INF/common/css/style.css and also included Bootstrap in this directory: /WEB-INF/common/css/bootstrap/bootstrap.min.css I ...

javacssjspstruts2

Adjust the size of CSS sprite pixel art without blurring the image

I am attempting to enlarge CSS sprite pixel art images and need to completely eliminate anti-aliasing/image smoothing. After reading this post on the subject: Disable antialising when scaling images, I experimented with the following CSS: image-rendering ...

cssscalecss-spritesscaletransform

Navigate to the dynamic route using regular expressions in the NextJS configuration file

I encountered an issue while building a new website. In my old site, there were some pages with a child route /feed. For instance: www.mypage.com/blogs/blog-1/feed My goal is to redirect from /blogs/blog-1/feed to /blogs/blog-1, but I keep getting a 404 ...

next.jsdynamic-routing

Exploring domain routing in Next.js with sub-domains

I am currently working on translating my Next app according to the specific subdomain. For instance, I want en.hello.com to display content in English, while it.hello.com should show content in Italian. I have been attempting to accomplish this using Next ...

reactjsrouteslocalizationinternationalizationnext.js

Implementing a Dynamic Sidebar in React

I'm trying to create a unique file separator styled menu in react, but my CSS skills are limited. I've come across several similar menu components, but they all take up the entire page. The challenging part for me is designing the shape of the c ...

javascripthtmlcssreactjs

Can Bootstrap CSS take precedence over a theme's styling?

After working with various WordPress theme templates, I am now ready to take on the challenge of creating my own custom themes. One aspect I would like to incorporate is utilizing Bootstrap to ensure my website is responsive. However, I have some questions ...

phphtmlcsswordpresstwitter-bootstrap

When ALIGN-ITEMS: CENTER is removed, the <a> element expands to fill the entire line

Currently, I am delving into the world of CSS and grappling with a particular behavior that has caught my attention. section{ display: flex; flex-direction: column; align-items: center; } .banner-area a.banner-btn{ padding: 15px 35px; backgrou ...

htmlcssflexbox

Next.js server component allows for the modification of search parameters without causing a re-fetch of the data

I have a situation where I need to store form values in the URL to prevent data loss when the page is accidentally refreshed. Here's how I am currently handling it: // Form.tsx "use client" export default function Form(){ const pathname ...

javascriptreactjsnext.js

What is the importance of rendering the Material UI Typography element in a client-side Next.js component?

Starting a new project using Nextjs 13 and incorporating material UI for website design. Encountered an issue when utilizing the "Typography" element with server-side components, causing the website to crash. To resolve this, added "use client" to ensure ...

next.jsmaterial-ui

What is the best way to customize the styles of md-input-container in Angular 2?

Below is the code snippet for a md-input-container using angular material design: <md-input-container> <input mdInput [placeholder]="'common.password' | translate" type="password" formControlName="password" (change)="onPasswordCh ...

htmlcssangularangular-material2

Responsive Bootstrap table unable to expand div upon clicking

My bootstrap responsive table has a unique functionality that allows specific divs to expand and collapse upon button click. While this feature works seamlessly in desktop view, it encounters issues on mobile devices. CSS .expandClass[aria-expanded=true] ...

javascripthtmlcssbootstrap-4

Steps to dynamically adjust the height of a slick carousel

Currently, I am experimenting with the slick carousel for testing purposes. In my setup, I have manually set the height of the slides: <div class="slides"> <div>slide a</div> <div>slide b</div> <div>slide c& ...

jquerycssslick.js

Using the HTML attribute text-overflow: hidden with a dot at the end may not produce the desired results

Currently, I am utilizing a bootstrap card and attempting to enhance the appearance of the lengthy text within the dscrptn_limit class by adding ellipsis at the end. This is my template: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn. ...

htmlcssbootstrap-4

Secured Path Utilizing Firebase

I have integrated Firebase for User Authentication in my Next.js Application and I am looking to enhance security on the client-side. Utilizing firebaseui react-firebaseUI, I have successfully implemented Google Auth. How can I ensure that a specific Route ...

node.jsreactjsfirebase-authenticationnext.jsfirebaseui

Troubleshoot: Bootstrap Link Hover Effect Not Displaying

While learning how to style links with Bootstrap, I came across this tutorial. However, I encountered a problem when I tried adding the classes badge badge-info to the a tag. It doesn't display the hover effect when I hover over it with the mouse, but ...

htmlcsshoverbootstrap-4frontend

Customizing font sizes for individual fonts within the same font family

I am designing a website in a language other than English. This means that the text on the webpage will be a mixture of English and other languages. In order to make sure the text displays correctly, I have set the font-family like this: p{ font-family: ...

cssfonts

Guide to placing a heading in one corner and a button in the opposite corner

Desired Outcome: I am aiming to achieve a design similar to the one shown in the image below. https://i.sstatic.net/7AbdL.png Actual Result: However, what I ended up with looks more like the image below. https://i.sstatic.net/nrQZf.png This is my HTML: & ...

htmlcsstwitter-bootstrap