I'm trying to create a block with a smooth, curved cut-out in the top-right corner, similar to the image below: Currently, my implementation looks like this: As you can see, the current curve is not as smooth as I'd like…
Creating a heart shape is not a problem. A few examples can be found here: How to create a heart shape using CSS? The problem with these solutions is if you want the heart shape to be clickable, the whole…
I'd like to create a speech bubble using pure CSS. There's a few requirements I have: It must scale with either the content + some padding or a preffered size. It's background color should be semi-transparent. You should be able…
Let's say I have a header tag like <h1>Menu</h1> And I want to create a css rule to style it. First, with a blue background color. Then, near the lower right corner of the banner, I want it to style…
that's the image and i've marked which shape i'm facing problem in to create it I tried a lot of different videos on youtube and read and studied the code on different websites, but so far didn't succeed in creating…
I am using the following code to display a ribbon in the upper right corner of a div and would like some help in moving this to the left hand side with the ribbon stripes on the right hand side…
I'm trying to recreate Google Maps's icon (2020). The colorful background and the donut hole are easy enough: I just need some gradients and a mask. Here's a snippet that shows my current efforts (and a codepen, if you want…
I need to make a shape like the picture below using CSS. There will be a number in the corner and content inside. Please tell me how to do it? I was only able to do this: .container { position:…
I am trying to create a rotated shape layout using CSS. However, when I rotate the parent <div> with transform: rotate(45deg), the text and icons inside the div also rotate. To counteract this, I attempted to apply an inverse rotation…
For my app, I'm creating a sign-up page with a nonstandard section boundary. You can see the effect I'm trying to achieve here: It's not a simple arc -- it has two straight lines but also an arc in the…