Questions tagged [css-shapes]

CSS-Shapes are made by the use of Cascade Styling Sheets to make HTML elements into shapes and images. The most basic shapes include triangles, squares, and circles but can be made into more advance shapes such as hearts, octagons, and stars.

Filter by
Sorted by
Tagged with
0 votes
0 answers
52 views

How can I mask a div with a background image? [duplicate]

I am looking to build a container to put some content in. I want to have a little text for the "notch" or the "tab" in the top. I tried building the same thing with pseudo elements ...
Christoffer Forstén's user avatar
0 votes
3 answers
87 views

How to create border with half circular shape on one side [closed]

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 ...
zymeth02's user avatar
0 votes
0 answers
27 views

background with same outline cut of shape [duplicate]

I want a background with the same outline cut as the shape of a button. Please suggest any other way to create the same outline shape. My create button shape: What I actually want: https://jsfiddle....
Gaurav's user avatar
  • 194
2 votes
1 answer
70 views

Keep the text inside a parallelogram and follow the shape

I am trying to archive the text inside a parallelogram. The edges of the text should follow the shape. The length of the text is dynamic so, I also need the height of the shape to be automatically ...
rahul's user avatar
  • 55
0 votes
0 answers
45 views

Making a slanted div same height as its parents

This is a banner image, with 2 columns. Floated-div is slanted to one side (like a razor design), see the picture further down, and the text are suppose to follow the left alignment with the slanted ...
MageMedia's user avatar
-1 votes
1 answer
52 views

CSS Ribbon Placement & Size

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 (...
Bec's user avatar
  • 15
1 vote
2 answers
55 views

How can I reduce the rounded corners of a MatFormField?

I want to reduce the roundness of the corners of a with a inside to make it more rectangular (sharp corners). <mat-form-field appearance="outline"> <input type="text" ...
Samoth's user avatar
  • 1,712
1 vote
1 answer
44 views

Draw vertically inclined parallelogram with text in css

I am trying to create a parallelogram kind of box aligned in a row and text inside it. But the styles I tried are not producing the exact designs that I want to achieve. Whenever I try to increase the ...
mc-user's user avatar
  • 1,823
-2 votes
3 answers
102 views

A shape with rounded corners and a triangle

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: ...
Tailor Tailor's user avatar
7 votes
2 answers
242 views

How to recreate 2020 Google Maps icon's shape without SVG?

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 ...
InSync's user avatar
  • 5,876
0 votes
2 answers
42 views

How can I achieve a rotated shape layout without effect the childrens with css?

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, ...
Flamingo's user avatar
  • 340
1 vote
2 answers
169 views

How to create a blended straight-line/curved section boundary using svg or css?

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 ...
ipenguin67's user avatar
  • 1,533
1 vote
1 answer
62 views

Creating a "cut out" at the end of list item that is responsive using CSS

I have a list of links that when hovered have a stylish underline using :after - however, I need to add another effect when an item is active/ hovered on (pictured below). When active, a "cut out ...
cts's user avatar
  • 948
0 votes
2 answers
67 views

How do I create a ribbon?

I wanted to create a Ribbon in my current project, but since I've never used ribbons before I dont even know how start... The ribbon should look like this: On the last longer part I want to add an ...
erniberni's user avatar
  • 329
0 votes
2 answers
67 views

How to change the background color of a random shape if I want multiple colors?

So basically I have a emblem/shield shape and I want to have it 4 different colors on each edge. Like on this pic but obviously with 4 different color: https://us.123rf.com/450wm/konstantinks/...
Habizsabi's user avatar
0 votes
0 answers
17 views

clipping a rectangle with semicircle shape [duplicate]

I'm trying to build this indicator and as you can see it has rectangles with a small rounded portion clipped off. One of the requirements is that you should be able to see the strips "behind"...
Avi's user avatar
  • 1,109
0 votes
3 answers
72 views

How to draw a circle around a number WITHOUT moving it?

There are plenty of examples of drawing circles around numbers using border-radius. However, the problem I have is that I am displaying numbers in columns and rows (in a table) to form a calendar and ...
BVernon's user avatar
  • 3,323
2 votes
1 answer
58 views

How to enlarge 3D rotating cube while keeping the dimensions normal?

I have a CSS only cube with 200 width 200 height but whenever I attempt to adjust it starts to look wacky body { margin: 0; width: 100%; /*border: 1px solid orange;*/ } .wrap { margin: 0 ...
midyow's user avatar
  • 21
1 vote
1 answer
233 views

CSS triangle at the end of an element

I have this code that I'm listing below where the elements for the categories are. I need to modify the bottom border to look like this picture: Is this possible using after and before pseudo-...
Energizer7's user avatar
2 votes
1 answer
410 views

How do I make a honeycomb grid using CSS?

I need to create a honeycomb grid wherein the 9 honeycomb filled with red color should always be at center when the screen width changes. More likely my goal is to have the same effect as background-...
JustR's user avatar
  • 131
0 votes
2 answers
408 views

how can I draw this shape using CSS ::after and ::before?

I know there are many different ways to draw in CSS but I want to draw this shape using CSS ::before and ::after pseudo-elements. Only the yellow part I could not draw it. .body{ width:100%; ...
ABDULAZIZ NOREDIN QADMOR's user avatar
-1 votes
1 answer
942 views

How to draw Semi circle with css

I'm trying to create a semi-circle with CSS, which looks as below. <div class="semi-circle"></div> I have tried to create a semi-circle with one circle, and one rectangle where ...
user avatar
1 vote
3 answers
138 views

how to create shape with half square and curved shape uisng css and html

i am trying to draw a shape exactly given in the image below here is my html and css code which gives shape somewhat similar to this but in single color i am not getting how can i do it in multicolor....
shreyas35's user avatar
  • 165
3 votes
1 answer
90 views

Inverted border radius using a :before background?

I want to do an inverted border radius using a background, like so: Here is my code: .curved { background: #D3041E; height: 200px; width: 100%; position: relative; } .curved::before { ...
Noor Gag's user avatar
2 votes
2 answers
513 views

How can I make a cut corner with border-radius?

I already have one solution which going like this one below. But at Safari it looks like there is no margin-right: -5px;. Are there another ways to done this task or fixes for already existing ...
feelingreat's user avatar
3 votes
1 answer
77 views

How do I scale this square of 4 Triangles?

When it gets smaller the triangles don't stay together. How do I fix this so that it is scaled properly? To reproduce, move the window in and out and you'll see the triangles get all messed up. The ...
Eve Ninnall's user avatar
1 vote
0 answers
43 views

Rounding corners of parallelogram made from clip-path CSS [duplicate]

I need to create a parallelogram with rounded corners. I'm using clip-path, but haven't been able to round the corners so far. Here's my code, any help is appreciated. Thank you! .parallelogram { ...
Ghers Fisman's user avatar
0 votes
1 answer
163 views

How to make top and left border of a div slanted

.container{ max-width: 80%; margin:auto; } .section1{ background: #541A81; padding: 60px 0; } .content{ background:#ffffff; /* clip-path: polygon(0 90px, 100% 0, 100% 100%, 0 100%); */ ...
Aayush Dahal's user avatar
-1 votes
1 answer
491 views

How to make arrow-shaped background with css or svg? [duplicate]

I'd like to simply get pointed to the right direction... I have to code a css or svg background like this: Also please note the rounded tip. Should I use pure css (and in this case, what rules should ...
Luca Reghellin's user avatar
-3 votes
1 answer
64 views

How to write text inside circle near border using shape outside? [closed]

I want to write text or add icons near border circle div tag. Is someone have do this idea. I am try do this last one week but cannot do
Jorakuly Atamuradow's user avatar
1 vote
0 answers
223 views

How to create cone shape using clip path css?

Now I try create sector shape or cone shape on css and html for write inside text. This picture. If someone have any idea please write. I try use clip-path and shape-outside for this. but I cannot do ...
Jorakuly Atamuradow's user avatar
2 votes
1 answer
354 views

Backdrop-filter blur in combination with wavy border

I'm looking for the solution of combining the backdrop-filter:blur(XXpx) with a wavy border. See the image attached image. I've already tried SVG waves and :before :after ellipses but this seems to me ...
Jirka Šimonek's user avatar
10 votes
1 answer
1k views

Create a responsive receipt cutoff (zig-zag border)

I am trying to make some HTML and CSS look like a receipt. I want the bottom of this receipt to look like it was torn off. I have gotten an ::after style that looks close to what I want, however on ...
klaurtar1's user avatar
  • 750
0 votes
1 answer
110 views

How to build a convex curved triangle? [closed]

How to build a convex curved triangle with CSS? I just need the top maroon part. It's basically a triangle that curves outward. I know I need to use calc for height and width. But I don't know where ...
Abdul Amoud's user avatar
3 votes
2 answers
324 views

How can i do a rectangle + octagon with full border?

the shape that i want to do the shape that i have by searching in similar questions i want the shape to have full border (like in the image). Inside this shape its gonna be more content so i need it ...
Krankesito's user avatar
-2 votes
2 answers
756 views

How to implement curved-start only bottom navigation bar in react/react-native?

I want to make such bottom navigation bar, the curve is fixed there and does not move when you press the tab buttons, tried both svg paths and d3-shapes But could not manage to find the correct ...
Extreme Geek's user avatar
1 vote
0 answers
43 views

Suggestions for Rendering Custom Drawn Shapes for React Web App

I am at the beginning of creating my own personal React Web App, and I would like to first start by creating a custom trapezoidal (Nothing too complex) shape to use all over the front page. I ...
Jon Kochanik's user avatar
1 vote
2 answers
646 views

How to create a folder-shaped element

I am trying to figure out how I can create an element that has a folder shape, a parent element which contains other elements like text. The element I am trying to create should look like this: I ...
Maxswift's user avatar
1 vote
1 answer
440 views

Is it possible to do this shape CSS?

I was asked with making such a background on a responsive site. I thought about preparing two divs using gradient, but it is highly problematic. Is it even possible to do it? Using this as a ...
Marcin's user avatar
  • 23
0 votes
1 answer
348 views

Responsive grid with a circular image and cut out div

I need some help here. I am trying to achieve the following layout - a rectangular div containing text on the left and circular image on the right, similar to this (but reverse order). I'm also using ...
krzyzws's user avatar
  • 31
0 votes
1 answer
248 views

How to Transform CSS only top left shapes of div [duplicate]

I have a design that must be reshaped like the image below without having to change the letters such as using "transform: skew", because it will change the shape of the existing letters. I ...
Ivan Juliant's user avatar
0 votes
2 answers
4k views

How to create an irregular shape for images using css? [duplicate]

Is it possible to create an irregular shape for images with CSS like in this url? As a starter point I made this but I do not manage to make more irregularities appear on each side of the image, as in ...
Liviu's user avatar
  • 21
-1 votes
1 answer
297 views

How would I make a subtle curved line divider between two images?

As such: https://i.stack.imgur.com/UdHNE.png CSS border, clip path, etc? I've tried the following: div#box{ width: 38px; height: 500px; border: 13px solid black; border-color: transparent ...
4oh3's user avatar
  • 13
-1 votes
2 answers
101 views

How to make that shape with css? [closed]

Hello I need to somehow integrate the day mark of the below datepicker. Can it be done with css? or do you have any suggestions
nwerigbxb2's user avatar
1 vote
1 answer
395 views

Produce a rectangle shaped box with a heavy straight right arrow in CSS

I am trying to produce a rectangle connected to a heavy-arrow (right facing) like the following: (Link to image for those using SO dark theme) I have attempted this by splitting the shape into parts. ...
caston's user avatar
  • 159
0 votes
0 answers
18 views

Curved header with CSS where the curve does not scale weird with different height and width changes (responsive) [duplicate]

I have found multiple questions answered on stackoverflow how to create a curved header but none answer my specific problem. These days responsive design is a must but I have not found a way to ...
user3261212's user avatar
-1 votes
1 answer
61 views

How to draw a circle inside a circle with text [duplicate]

I want to create this with HTML and CSS. It should be exact same as in photo. Could you please help? Thanks in advance. enter image description here
Sevinc Mehdiyeva's user avatar
0 votes
1 answer
662 views

Adding dot below current date in react datepicker using CSS

I want to add 1 small circle / filled dot below today date number, e.g if today is 1st of march then in the datepicker below the number 1 there should be a dot on the datepicker. I have tried adding ...
OnePiece's user avatar
  • 388
3 votes
2 answers
1k views

White line between an element and svg shape

Hi guys, i'm using svg shaper generated from shapedivider an how you can see, there is a white line and i don't why its there and how to remove it. Could you please help me? there is the code of the ...
user avatar
0 votes
0 answers
84 views

I would like to take a div and curve it like a next thermostat temperature range and implementing a slider within that div

Nest Thermostat I'm drawing up ways to curve the div to make it to that shape like in the picture above, but I'm a bit lost on how to do so. Also implementing a range slider for the temperatures ...
jeff montinard's user avatar

1
2 3 4 5
38