1,881 questions
0
votes
0
answers
66
views
How can I apply this SVG curve path to a div background or clip-path in CSS? [closed]
I’m trying to create a header layout with a specific curved shape.
The small squares are SVGs, but I can’t reproduce the curved blue border using CSS clip-path.
Here is the path I want to apply to a ...
- 1
0
votes
1
answer
86
views
How to create a curved top border in the center of a fixed bottom bar (with seamless border & background)?
I’m working on a fixed bottom navigation bar at the bottom of the page. I want to add a curved shape (like a rounded “notch”) at the top center of this bar.
Example:
I’ve tried using a ::before ...
- 93
2
votes
0
answers
77
views
CSS Breadcrumbs responsive custom shape
I've been trying to implement a breadcrumb pattern where the breadcrumb items are arrow shaped as the image bellow:
The arrow shaped breadcrumb item contains text and should be, at least, adjustable ...
- 535
0
votes
1
answer
79
views
How to prevent content from overflowing in a skewed div element?
I encountered an issue where the text extends outside a skewed div.
I managed to straighten the text inside the paragraph, but this caused the text to overflow from the div.
.leftStyle {
...
- 1
2
votes
2
answers
549
views
How to create a smooth inner curve for a block's corner?
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 ...
- 2,179
-4
votes
1
answer
111
views
How do i create this corner rectangle cutout shape [closed]
Given is my website design
But i am unable to build shapes
Like in the left bar
you can see a rectangle with a cutout
so could anyone please tell me how can i create that?
I was able to create that ...
- 13
1
vote
2
answers
123
views
How to make a receding flipped corner with CSS
This is what I am trying to build, an orange column that is sitting higher than the purple row with an inward flipped left corner:
I am probably not using the correct terminology to do my research, ...
- 505
0
votes
3
answers
464
views
Create a (clickable) heart shape using CSS only
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 ...
- 5,082
3
votes
4
answers
307
views
How to mirror VueJS' logo properly in CSS-only?
I'm trying to replicate the VueJS logo with a CSS-only approach, not by importing an SVG or anything.
I've use clippy to have some proper clip-path, but still there is no way for me to find the proper ...
- 47.3k
1
vote
1
answer
146
views
Creating a wavy border on all sides using CSS
Using this generator I can create the wavy border I'm after on either the top and bottom or left and right, but I'm having trouble combining these masks to create a wavy border all the way around.
Top ...
- 1,950
0
votes
1
answer
40
views
function to randomly select an image from an array of shapes and displaying the sides number on the correct side,
I want to create an array of images for the shapes and when displayed I want the side number to be displayed on the correct side and the cm to change to m and also for them to be together
I tried to ...
2
votes
1
answer
69
views
How to calculate translateX in a hexagon made of arrows
I created a hexagon made by six arrows using html and css, I want to stick the arrows together without gaps.
The 37% in translate(37%, -25%) is derived using the exhaustive method, and its not precise....
- 2,536
0
votes
1
answer
125
views
Multiple CSS Overlay shapes in Bootstrap
I am trying to create the css for my landing page like I have shown in the figma design. The page is built in bootstrap 5 (not sure if that matters). I know this is possible but i'm having a hard time ...
- 132
2
votes
2
answers
555
views
Pure CSS speech bubble with semi-transparent background and a border
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 preferred size.
It's background color should be semi-...
- 589
-1
votes
1
answer
233
views
80% Circle Border [duplicate]
Right now I have a Circle which serves as a wrapper for my icons. However, I was wondering if it was possible to not show the "full" circle but rather 80% of it. The provide picture shows ...
- 103
0
votes
0
answers
342
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 ...
- 33
0
votes
3
answers
172
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 ...
- 11
0
votes
0
answers
31
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....
- 196
2
votes
1
answer
263
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 ...
- 55
0
votes
0
answers
69
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 ...
0
votes
1
answer
82
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 (...
- 25
1
vote
3
answers
750
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" ...
- 1,727
1
vote
1
answer
82
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 ...
- 2,111
-2
votes
3
answers
185
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: ...
7
votes
2
answers
362
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 ...
- 12.2k
0
votes
2
answers
67
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, ...
- 415
1
vote
2
answers
774
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 ...
- 1,609
1
vote
1
answer
86
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 ...
- 1,084
0
votes
2
answers
221
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 ...
- 401
0
votes
2
answers
84
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/...
- 47
0
votes
0
answers
19
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"...
- 1,499
0
votes
3
answers
282
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 ...
- 3,957
2
votes
1
answer
95
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 ...
- 21
1
vote
1
answer
357
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-...
- 65
2
votes
1
answer
3k
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-...
- 131
0
votes
2
answers
840
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%;
...
-1
votes
1
answer
3k
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 ...
user20002028
1
vote
3
answers
260
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....
- 175
3
votes
1
answer
255
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 {
...
- 41
4
votes
2
answers
2k
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 ...
- 85
3
votes
1
answer
96
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 ...
user17631451
1
vote
0
answers
49
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 {
...
- 11
0
votes
1
answer
334
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%); */
...
- 1,242
-1
votes
1
answer
783
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 ...
- 8,195
-3
votes
1
answer
136
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
1
vote
0
answers
411
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 ...
2
votes
1
answer
559
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 ...
12
votes
1
answer
4k
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 ...
- 788
0
votes
1
answer
165
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 ...
- 89
3
votes
2
answers
830
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 ...
- 33