1,881 questions
-2
votes
2
answers
2k
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 ...
- 733
1
vote
0
answers
76
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 ...
- 11
1
vote
2
answers
2k
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 ...
- 73
1
vote
1
answer
1k
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 ...
- 23
0
votes
1
answer
393
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 ...
- 41
0
votes
1
answer
453
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 ...
- 107
0
votes
2
answers
8k
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 ...
- 21
-1
votes
1
answer
445
views
How would I make a subtle curved line divider between two images?
As such: https://i.sstatic.net/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 ...
- 13
-1
votes
2
answers
107
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
- 21
1
vote
1
answer
877
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. ...
- 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 ...
- 449
-1
votes
1
answer
64
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
0
votes
1
answer
1k
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 ...
- 559
3
votes
2
answers
2k
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 ...
user17346450
0
votes
0
answers
122
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 ...
2
votes
2
answers
399
views
How to inscribe text inside a triangle? (CSS)
First time working with clip path and shape outside, I'm trying to write text inside a triangle with text being clipped. I already tried svg solutions, but text becomes very unreadable which is bad ...
0
votes
1
answer
117
views
How to make a curve at intersection point on a rectangle in css?
I want to create the following shape:
Important: If I use "Border Radius" it works on edges, but I require a curve at the intersection (and I do not want this result):
Thanks in advance
0
votes
2
answers
308
views
I can't make the 3/4 circle and i have to use one div only so how can i make it as the example in the link below
here is the shape i want to do enter link description here
P.S.I am still learning the front-end stuff so could you pls help me with this assignment.
Here is the HTML code <div>Elzero</div>...
1
vote
0
answers
632
views
Create a Diamond shape with centered wrapping text inside
I have struggled for some while to create with pure HTML/CSS a diamond element that contains editable text inside that conforms to the outer shape of the diamond. I have messed with transforms, and it ...
- 391
1
vote
1
answer
71
views
How to make two paragraphs of a text wrap around an image from both sides?
After spending a lot of time I finally managed to do this:
window.onload = () => {
const fimg = document.querySelector('#first img')
const fimgWidth = fimg.getBoundingClientRect().width
...
- 169
2
votes
1
answer
2k
views
How to create rounded corners in semi circle SVG
I have this svg of a semi circle:
<svg width="200" height="100" style="transform: rotateY(180deg); overflow: hidden;">.
<circle cx="100" cy="...
- 141
0
votes
1
answer
109
views
Can someone explain to me why my div won't appear as a triangle? [duplicate]
I am trying to turn my empty div into a triangle but everything I've tried produces the same result, nothing. I'm hoping a fresh set of eyes can tell me what I'm missing.
body {
background-color:...
- 169
2
votes
3
answers
1k
views
Polygon border of a button with transparent background
I am trying to make a polygon border shape like the image below but with a transparent background.
The code I have tried is below. In the code, there are a total of 28 points. First from a point in ...
- 97
6
votes
1
answer
513
views
Polygon border / border radius of a button
I am trying to make polygon border shape like image below.
The code i have tried is below.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.p-button{
...
- 97
1
vote
2
answers
331
views
Can I create a shape in CSS (a pencil) without it acting weirdly when I try to rotate it?
I'm trying to create an image that looks like a pencil in CSS, which I think I've done OK, but it acts weirdly when I try to rotate it with "transform: rotate(-45deg);". I thought it would ...
- 13
1
vote
2
answers
3k
views
Making a hexagon with a mask and border in css3
I am trying to make a hexagon with border radius, border and something like a mask. Something like this :
However, I am a bit stumped by the 'mask' and how I should go about making that shape. Would ...
- 67
0
votes
1
answer
322
views
CSS Triangle on materialui tooltip's right side [duplicate]
The problem is the content's height is changing on some tooltip
this is how it is supposed to look
This is what i tried
when content is small
when content is big
this is the code of what i did
const ...
- 13
2
votes
1
answer
510
views
Pentagon div with dynamic text inside
Stumbled across a bit complicated requirement which requires a container with a triangular side on the right which expands depending on what's inside and it should have a rounded corners. This is what ...
- 864
1
vote
3
answers
201
views
Add a border to a linear-gradient shape
I need to make triangle with a black border in the background, I am using linear-gradient to get the triangle, but I can't find out if it is possible to add a border.
This is what I get:
And this is ...
- 853
0
votes
2
answers
275
views
Radial gradiant, split a section in two CSS ellipse shape
I am trying to split my section in two, and make the middle into this half ellipse shape. But I can't do it.
.super {
background: linear-gradient(to right, grey 50%, red 50%);
}
<section ...
0
votes
2
answers
603
views
Updating percentage in progress circle
I'm building a to-do list with a progress circle, using one of the alternatives given here (CSS Progress Circle). In my script.js I defined the function drawRingProgress() which renders the canvas ...
- 139
2
votes
2
answers
3k
views
CSS circle with size adapting to it's content [duplicate]
Hi guys i have created circle using CSS shape.
I have used contentEditable="true" so the content of the circle can be edited.
The problem here is now when I edit the text inisde the circle ...
user10815652
0
votes
2
answers
304
views
background shape with smoothness css [duplicate]
how to create this shape in background. I tried using radial-gradient but still, the smoothness of round is not there. I also tried clip-path but it is cutting my other images on this page. I want ...
12
votes
4
answers
37k
views
How to make a triangle shape with Tailwind?
<div class="">
<div class="w-16 h-16 border-b-30 border-l-30 border-solid border-black">
<div class="h-16 w-16 border-t-30 ...
- 131
0
votes
2
answers
47
views
Creating shape with CSS
Trying to create this shape with css
I've managed to get to this result
but can't figure out how to create the arc in the bottom part of the rectangle
this is my css
.left-page {
...
- 1,879
-7
votes
1
answer
97
views
Curve arc between two sections [closed]
How can i can make a curvy arc between two sections using CSS or SVG like this one :
(the orange arc between the grey section and the blue footer)
- 31
0
votes
0
answers
331
views
How to create image fancy shape using css? [duplicate]
How to create fancy shape using CSS and html5 , I have a section in which I would like to create certain shape using css
Here is jsfiddle : live demo
img {
height: 145px;
width: 145px;
...
- 5,604
1
vote
1
answer
937
views
Is there a way to add a border to an arrow shape with CSS?
I have an arrow-like shape created with CSS only. I want to apply a border to it and if possible, a box-shadow as well. I've tried following this answer, but it won't work. I also wonder if there's ...
- 517
0
votes
2
answers
60
views
Issue with styling the text within a css shaped links
I have created a step / pointer horizontal navigation by creating shapes in CSS. The issue I am having is I cant seem to position and style the text "Step X: Some text" within the links. I ...
-2
votes
5
answers
614
views
How do I make this shape in HTML?
I'm trying to make this shape in HTML/CSS, and I can't do it for the life of me. If anyone can give a heads-up, it would be much appreciated. Including JS also doesn't matter. If you can give the ...
user10980551
1
vote
2
answers
2k
views
How to Curve the hypotenuse of a triangle with CSS
I would like to curve the hypotenuse side of this triangle div/background with CSS, so the result is something like this:
- 25
0
votes
2
answers
591
views
Glasses shape design with CSS
I need to code this glasses shape design for the home page of a website with CSS, and I need to consider in the empty space of upside of glasses we want to put some dynamic data.
My problem is how to ...
- 59
-1
votes
1
answer
298
views
Creating CSS wave shape [closed]
Sample image
I would like to archive this kind of shape using CSS.
#wave {
position: absolute;
height: 50%;
width: inherit;
background: #e0efe3;
}
<div id="wave"></div>
1
vote
3
answers
2k
views
How to make a resizable heart in CSS with a border
I want to make a heart shape which can be resized by usersr to any width and height and have a border of 1 px.
I tried a heart made in pure CSS:
https://stackoverflow.com/a/17386187/1404447
I tried ...
- 3,072
6
votes
3
answers
422
views
How can I add a colored shadow at the right inside of my hexagon?
Thankfully I've found a hexagon on SO but now I've a problem. The hexagon can be filled with any color - currently orange but I need to fill it with a color and a shadow:
<svg viewBox="0 0 180 ...
- 5,311
0
votes
1
answer
172
views
How to make custome shape deformation?
I have a sf::RectangleShape 2D cube and want to create functionality to draw sides "like 3D" for that cube.
This is my solution:
//X. Y
//gonyometric latters for clearity
sf::...
- 25
1
vote
1
answer
323
views
How can i add a custom curved shape inside a sidebar using CSS?
body{
font-family: roboto;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.sidebar{
position: fixed;
left: 0px;
width: 314px;
height: ...
- 67
0
votes
1
answer
154
views
Skewed Borders on 2 Div [duplicate]
I'm trying to skew two div, similar to this:
Desired result
However, there is always a white line in between. I tested with a negative top margin but it doesn't work in responsive.
My result
with this ...
-3
votes
1
answer
561
views
How to create a curved, sharp edge (think blade) using only CSS
Here is an image of what I am trying to create:
I have tried using border radius but the result is always too round. I am looking for a CSS solution (no SVG).
.blade {
height: 300px;
width: ...
- 527
2
votes
1
answer
581
views
Rounded image shape using clip-path
I want to have css clip-path like the below image
can someone help me
img {
clip-path: polygon(53% 0%, 100% 1%, 100% 50%, 100% 100%, 55% 100%, 42% 65%, 0% 52%, 44% 36%);
border-radius:0 100% ...
- 71