1,881 questions
4
votes
3
answers
978
views
Is it possible to hide/remove borders inside of intersected area of multiple divs?
When two or more div's intersect they just overlap and their borders are visible:
.circle {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid ...
- 7,442
2
votes
1
answer
2k
views
Skew Background Image on one side with a border
I am trying to skew a background image on one side that has a border.
The layout I am basically trying to create is as follows:
Here is a quick JSFiddle I made with the current setup:
https://...
- 5,692
1
vote
2
answers
240
views
How to create this shape with css and html?
I want to create shape given in below image but I have this code that not meeting my requirement and i don't know any way to create this please help me to create this shape with HTML and CSS it should ...
- 196
4
votes
4
answers
6k
views
CSS custom shape with irregular rectangle and border
I'm trying to create a button like this:
After researching online, I only came up with making a parallelogram. But this is the result:
Code:
.parallelogram {
width: 100px;
height: 50px;
...
- 940
3
votes
1
answer
158
views
Want create this graph using css and html
I have tried this code but facing problem with size.Facing problem while changing size of circle border so please help me to solve this problem.Run code on snippet and will be know what problem i have ...
- 196
1
vote
2
answers
831
views
Create a Shape ONLY with CSS
I need to create this custom shape with only CSS3.
Need to be with CSS, not svg.
I was trying to use the snippets of this link: Wave (or shape?) with border on CSS3 but i don't know how to manipulate ...
2
votes
3
answers
3k
views
How to create a cloud by combining shapes into one using CSS?
So I'm trying to create a cloud using divs and CSS mainly. I have few divs shaped as circles or blobs and the idea is to merge them into one so that they look like a cloud.
.cloud-body{
...
- 175
9
votes
6
answers
5k
views
How to add a vertical curve divider using HTML and CSS?
Is there a way to copy the image design below using CSS shapes? I could not reproduce the curve between the image and the blue background.
I tried to use a border but that is not working:
<!...
- 3,134
2
votes
1
answer
2k
views
CSS "inverse border-radius" outside element's bounding box to create a mobile phone notch design [duplicate]
I'm trying to create something that looks like a mobile phone with HTML and CSS and I'd like the camera to have something like an "inverted border-radius" that connects it with the frame smoothly.
I ...
- 21.4k
2
votes
3
answers
133
views
Creating arrows purely in CSS backgrounds
I need to create a CSS class that can be added on the fly to various empty square div boxes that would add "half-width pointed lines" just like in the example below. Ideally, I could just add class="...
- 127
1
vote
3
answers
858
views
Playing with CSS shapes: How to make a custom ICON using pure HTML and CSS
Currently, I am playing with HTML and CSS and I wanted to make a icon from this image
the image is somewhat like that. I tried adding different shapes of ovals and circles inside the bigger circle ...
- 183
1
vote
2
answers
121
views
How to implement a circular border?
I've been creating this "ticket-like" border next to my images, and got the border-bottom working just fine (see the image below).
It is necessary (I think) to implement the border with ::after pseudo ...
- 1,609
1
vote
4
answers
505
views
How to create this shape (quadilateral with rounded corners) in CSS?
I am building a widget in React Js, and in the design, this image is in the background.
My problem is the background color is dynamic and the width and height may change according to the devices. I ...
- 8,712
3
votes
1
answer
106
views
Drawing semi-rounded shape in CSS
I'm trying to replicate the shape
When I use rounded shapes in CSS, it looks somewhat different:
.shape{
display: inline-block;
text-align: center;
line-height: 18px;
border-radius: ...
user12260140
4
votes
1
answer
2k
views
How can I display Text around circle. CSS shape-outside
I want to show the text around the Circle
I use shape-outside: circle() property but it is not giving me the result
i want to display two containers first is "class circal" which is used to display ...
- 67
0
votes
3
answers
536
views
How to achieve curved top pointer
Can anyone please help with this? How to achieve the attached button with CSS only(no image)?
This is my code so far:
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;...
- 25
2
votes
2
answers
626
views
How to align text to bottom, while floating css shape to side, so that text wraps to shape?
I have some text inside a <p> that is inside a <div>. I have a css image shape that floats to one side. I want the text in the two upper boxes to wrap to the shape but also align to the ...
- 133
1
vote
1
answer
2k
views
Using mixed linear-gradient and radial gradient
I am trying to generate a shape using linear-gradient and radial-gradient for background when hovering on an image.
I want to have the following shape shown on hover (the grey has 0.8 opacity):
I ...
- 2,491
5
votes
2
answers
340
views
Create Triangle Menu
I am trying to create a menu that contains right triangles formed together to form a square. This is what I envision:
This is what I hope to achieve:
Can be dynamically generated through javascript.
...
- 107
8
votes
1
answer
1k
views
CSS: multiple arrows on a button
I am wanting to make a button with multiple arrows on the right like this:
This is what I have done: https://jsfiddle.net/aqjfLy7s/. I am unable to figure out how to get the first arrow flush with the ...
- 2,166
3
votes
2
answers
530
views
How to create a "Pear-like" shape with css
I want to create this shape with css.
I have tried using border-radius but i can't make it exactly like above.
This is the closest i could come up with the border-radius property
fiddle
.mybox {
...
- 108
1
vote
1
answer
863
views
Is it possible to create 2 different shapes in one css partial using only one div? [duplicate]
I am trying to create an ice cream cone as a single div drawing in CSS and I'm not allowed to change my HTML. I made the top part using box shadows and the cone using borders, but I can't figure out ...
- 13
2
votes
1
answer
1k
views
Create a custom peeler animation with transparent triangle image with Css, js
I wanna create a custom peeler animation with a transparent triangle image as you see below
This triangle need to reveal the image behind when hovering over the triangle.
The reason why am not using ...
- 1,020
4
votes
2
answers
1k
views
How to create custom triangular shape using CSS
I have created a semi-custom shape in div like below
.myDiv {
border-bottom: 300px solid #FFC20F;
border-right: 150px solid transparent;
height: 0;
width: 265px;
}
.myDiv p {
...
- 3,896
3
votes
4
answers
4k
views
Background - single diagonal stripe
I need to have a background with CSS as the image attached back I can't make it work with linear-gradient.
I was trying with the following but I am unable to create just 1 white stripe.
div {
...
- 335
8
votes
4
answers
4k
views
CSS circle with inlay border
I'm trying to create a circle in CSS with an inlay border as per the below sample:
I have the following HTML and CSS, but it's not producing the effect that I need:
.inlay-circle {
width: ...
- 4,350
1
vote
1
answer
2k
views
CSS transparent curved shape with two rounded sides
I'm trying to create inner curved transparent shape,like this
but i have trouble with creating this kind of curved shape,this is what i am done`
body {
background-color: #00a4ffb3;
}
....
3
votes
2
answers
3k
views
Scratch style shapes using CSS? [closed]
How to create shapes as shown in screenshot below with CSS. The green rectangles look easy to make, but the problems is orange one and blue one. This project is an open source project https://github....
- 7,668
3
votes
2
answers
482
views
Trying to create this css ribbon. Struggling with the curve of the ribbon
I've tried to create this css shape (ribbon) using border radius but I'm unable to do so, the curve I'm able to get isn't exactly matching the div's curve in the image.
background: #008712;
width: ...
1
vote
1
answer
188
views
How to make oval-ish shape in css
I am trying to make this grey shape using a css class.
I thought using a border-raduis would work. The shape is close but is still off.
I currently have this:
This is the css that i'm using:
.total--...
- 2,761
3
votes
2
answers
136
views
Extra ordinary ribbon css
anyone has exprience with stuff like that?. Here i've tried with box-shadow, but result not similar with image. Thanks.
.ribbon{
width: 30px;
height: 60px;
background:#ebebeb;
display: flex;
...
-1
votes
1
answer
262
views
Border of rectangle with curved side
I have a shape that looks like this
It is a rectangle with a circle behind it. I need to do a border all around it.
I tried to do a border for the rectangle and a curved line for the curved part (...
- 525
1
vote
1
answer
9k
views
How can i add shape background like on image using css? [duplicate]
I tried like this but it's not right solution. Any solutions for this issue please.
.shape {
width: 200px;
height: 100px;
position:absolute;
top: 0;
right: 0;
background: red;
...
- 187
1
vote
2
answers
743
views
How to create a div with pointy edges?
can you help me to make like this div:
My Code:
body{
display: flex;
justify-content: center;
}
#talkbubble {
width: 160px;
height: 80px;
...
-1
votes
3
answers
425
views
How can I make this shape with background gradients?
I want to create this shape with only background. Or may clip-path & pseudo-element.
I tried so far with ::before
div {
height: 300px;
width: 400px;
background: tomato;
border-...
- 28k
-1
votes
1
answer
494
views
How to create zigzag shape using CSS?
Sometimes I see this type of shape and corner on web design. sample image
I have highlighted in red, please help how to create it using css.
- 31
3
votes
2
answers
2k
views
How to achieve a responsive ribbon shape in CSS?
Trying to achieve this with css.
I've achieved in doing this but this breaks if my label (CAREER) is longer the size of the div. If its longer then the content wraps and the height of the div ...
- 1,977
1
vote
1
answer
285
views
Center text in a css border-triangle in email
I'm trying to generate a triangle using css borders in an Email and put some dynamic text (numbers) in it, but i want to set it to the triangle center, and i cant use positioning because it's being ...
- 43
4
votes
4
answers
4k
views
Creating a CSS blinking eyelid effect
I am trying to create a wait/countdown screen that shows an eye along with the eyelid, and eyeball with an iris effect. Given that so many of us spend time pointlessly staring at such spinners the ...
- 9,028
14
votes
2
answers
8k
views
CSS Only Pie Chart - How to add spacing/padding between slices?
I've built a CSS only pie chart, but I need to add space between each slice almost as if it were a border. I've attempted to add a border to each slice but that doesn't actually work.
Any ideas on how ...
- 3,295
1
vote
1
answer
946
views
How do I put shapes (transform) over each other with ::before and ::after in CSS? Edge wont display shape over background
I created two slanted shapes to be displayed on top of a container with background image. I used ::before and ::after to get the shapes over the same image.
It works in Firefox and Chrome but not in ...
- 73
3
votes
1
answer
234
views
Can I create this shape with CSS only?
I'm building a hero section for a webpage that has a particular shape, at the moment I'm just using an image as an overlay for the actual section background, but I'm looking to reduce the amount of ...
- 5,802
0
votes
1
answer
2k
views
Are multiple polygons possible?
I'm trying to create a pyramid. I figured I'd use the CSS clip-path for that. I meant to do a triangle (which I managed to do) and several trapezoids beneath it (even the first one failed).
....
3
votes
2
answers
4k
views
How can I transform a line into two and rotate with css
I want to have a straight line in my header, and then a few seconds after the page loads, I want those lines to slowly move down until they look like the one in the image below:
I thought of using css ...
- 3,644
1
vote
1
answer
259
views
How to make a transparent bubble chat with triangle?
I need to do a bubble chat all transparent, except by the borders
somtehing like this:
I have found an excellent design to start with:
https://codepen.io/cool_lazyboy/pen/BWxggN
The problem is that ...
- 304
13
votes
3
answers
5k
views
Trying to create a camera shutter effect with divs
I was trying to make a circle camera shutter, but I have a problem getting it to look right.
That's how it should look:
The first 'petal' should be lower than the last and upper than next. How to do ...
- 336
8
votes
2
answers
14k
views
Create wavy borders in CSS for top and bottom borders
I'm trying to create a wavy top and bottom border like the image here
I tried recreating the same effect using the following code
.wave{
background: white;
height: 25px;
position: relative;
}
...
- 349
1
vote
0
answers
332
views
CSS-Shapes: Auto-adapt size of a triangle to the text inside it
I am trying to fit text into a triangle with fixed incline using CSS Shapes and need the triangle to adapt to text length. If the triangle's container isn't wide enough, it should turn into a ...
- 11
5
votes
1
answer
853
views
HTML and CSS irregular triangle image gallery
I need to create an image gallery, in which the individual images are irregular triangles (emphasis on irregular).
I found limited examples on how to achieve triangle images via html and css, without ...
- 902
6
votes
2
answers
4k
views
Gradient colour with Linear Gradient Border in text using css not working
I would like design £1 similar to the following image using CSS.
I would like to have some text with gradient colour, gradient border and text-shadow in this design. I tried the following code, but it ...
- 75