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 ...
- 2,012
63
votes
8
answers
171k
views
How to round out corners when using CSS clip-path
I want to be able to round out the 3 leftmost corners on this shape that I have created, any idea how that can be done?
div {
position: absolute;
z-index: 1;
width: 423px;
height: ...
- 12.7k
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 ...
- 697
9
votes
2
answers
32k
views
Can I make an ellipse using the CSS border-radius property?
I'm trying to make a rectangular image (headshot)
width: 200px;
height: 280px;
display as an ellipse.
I can't seem to stop it trying to make a circle, or forming points at top and bottom, while ...
- 9,290
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 ...
- 17.9k
18
votes
8
answers
50k
views
3D Box Shadow effect
So I know how to do a basic box shadow with CSS3. You can see that in the top of the graphic below.
The effect I'm trying to achieve is a 3D box shadow, as shown in the bottom of the graphic below.
...
- 1,621
8
votes
8
answers
17k
views
Concentric circles with CSS
Does anyone know how to draw concentric circles like the RAF symbol (concentric red, white and blue circles) using only CSS?
- 61.4k
24
votes
8
answers
21k
views
Clip path inset circle?
Is it possible to create an inset circle clip path so that the clip path would effectively cut a hole through the div in the center opposed to only showing the center?
The div should all be shown ...
- 280k
21
votes
2
answers
43k
views
Drawing angled lines in CSS
What I'm trying to do LOOKS simple, but I can't seem to figure out how to do it.
As you can see in my image there are a couple of red lines that go across the bottom, then bend upwards close to the ...
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 ...
- 13.8k
0
votes
2
answers
406
views
How to make Background div inner curved using HTML, CSS?
I want my section background look like as shown in the image at the end, how can i do that using css?
.bg{
width: 400px;
height: 200px;
padding: 20px;
text-align: center;
border: ...
- 5,326
19
votes
5
answers
48k
views
Create a cross shape in CSS
IS it possible, I know all the following shapes are possible in this link:
http://css-tricks.com/examples/ShapesOfCSS/
but cross must be possible too. When I say cross I mean like this:
- 124k
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 ...
- 280k
13
votes
6
answers
27k
views
How to make a rounded corner hexagon by using CSS
This is my CSS:
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
border-radius: 10px;
top: 30px;
}
#hexagon:before {
content: "";
...
- 6,258
0
votes
2
answers
267
views
How to create a squeezed box using only css
I am thinking how to style a squeezed box like this:
I found that I can achieve a similar result with pseudo elements and border-radius as percentage. Here is the CodePen: https://codepen.io/micu22/...
- 20.2k
108
votes
21
answers
135k
views
How can I show only corner borders?
I'm wondering if it's possible in CSS to make a border but only for corner. Something like this:
**** ****
* *
* *
...
- 178
114
votes
9
answers
216k
views
How to add border in my clip-path: polygon(); CSS style
I want to know if it is a possible to add border in my clip-path:polygon(); style or any another way to add border?
like : border:5px solid red;
.poligon {
display: inline-block;
position: ...
- 61
2
votes
1
answer
695
views
How do I draw a spinner with pure CSS?
I first tried implementing it through two triangles. And got a satisfactory output
#wrapper {
margin-left: 40vw;
margin-top: 20vh;
}
#fidgetu {
width: 0;
height: 0;
position: ...
- 760k
23
votes
5
answers
43k
views
Making jagged triangle border in CSS
I have a shape with an edge like this in Photoshop:
Is it possible to make the repeated triangles as a border with CSS?
- 394
96
votes
13
answers
265k
views
draw diagonal lines in div background with CSS
I have a div for a preview box:
.preview-content {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+...
- 2,988
59
votes
7
answers
143k
views
Can I create a div with a Curved bottom?
So I'm working on a site and I was wondering if it's possible to, purely using HTML5, CSS3 (and JavaScript if needed), make a div with a curved bottom, so it will look practically like this:
Or can ...
- 280k
4
votes
4
answers
3k
views
How to make border with square on corners?
How to make border with square on corners? And break one of the borders. Like on the image.
I did it with four additional blocks but I guess there might be a better way. And I don't know how to break ...
- 1,621
44
votes
6
answers
80k
views
Is it possible to create an angled corner in CSS?
I am wondering if there is any way to create this shape with pure CSS. To extend this problem further, this shape needs to clip the image inside (think of it as a mask - but the grey border has to be ...
- 61.4k
98
votes
16
answers
311k
views
Cut Corners using CSS
I'm looking to "cut" the top left corner of a div, like if you had folded the corner of a page down.
I'd like to do it in pure CSS, are there any methods?
- 61.4k
11
votes
3
answers
5k
views
How can I make a 45 degree responsive ribbon with folded corner?
Is it possible to create a corner shaped CSS ribbon?
.
I've tried with a png image, but is there any option to create using CSS? Should work with responsive views also.
.container {
width: 200px;...
- 3,160
15
votes
3
answers
16k
views
Is it possible to style a div to be trapezoidal?
I know it's possible to skew but I don't see a way to skew each corner with a particular degree.
Here's the project I'm working on: http://map.ucf.edu/
Looking specifically at the tabs within the ...
- 17.8k
30
votes
8
answers
69k
views
Make the right side of a div as an arrow
I have a simple div on a page:
<div>Some Text</div>
Is it possible, with CSS, to make it finish as an arrow. Something like:
UPDATE
This is the result I see with web-tiki proposed ...
- 71
7
votes
7
answers
38k
views
Transparent (opacity) image from top 0% to bottom 100% in CSS
Its possible do it? Just in CSS, like this picture, so I mean if I put on <div> tag background image, I need it to be transparent from top to bottom.
I want to create something similar to the ...
3
votes
1
answer
2k
views
How to create a curved line with gradient?
I'm trying to insert a curve in the middle of a div, so i can achieve this result:
This is what i did so far.
.back{
background-color: grey;
width: 100%;
height: 200px;
display: inline-...
3
votes
2
answers
3k
views
Creating smiley and adding expression
Here I created three smileys using CSS.
Fiddle - Demo
Should express Happy(this is there): <div id="smiley1">☻ </div>
Should express sad :<div id="smiley2">☻ </div> ??
...
CommunityBot
- 1
36
votes
4
answers
36k
views
Segments in a circle using CSS
I know you can make a circle in CSS using the border radius hack. But is there any way to make them have segments like this picture? Is there a way of doing this through HTML and CSS but not JS?
- 37.6k
108
votes
6
answers
83k
views
Capsule shape using border-radius without a set width or height?
Is it possible to make a capsule shape using border-radius without a set width or height?
I want the left and right sides to be completely rounded while the capsule would remain straight along it's ...
- 17.9k
8
votes
8
answers
15k
views
How to create a ribbon shape in CSS
http://jsfiddle.net/6HyjZ/
.bookmarkRibbon {
width: 0;
height: 100px;
border-right: 50px solid blue;
border-left: 50px solid blue;
border-bottom: 30px solid transparent;
}
<div class=...
- 17.9k
116
votes
15
answers
122k
views
Transparent text cut out of background
Is there any way to make a transparent text cut out of a background effect like the one in the following image, with CSS?
It would be sad to lose all precious SEO because of images replacing text.
I ...
- 107k
2
votes
4
answers
2k
views
Is there any way to colorize only part of image on hover?
I would love to code simple image painting in HTML, CSS and probably jQuery also.
Let's say I have a original image, and I want make it colorized but only in part of hover (or 10x10px square or ...
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 {
...
- 2,419
2039
votes
23
answers
257k
views
How do CSS triangles work?
There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puzzled with a triangle:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid ...
- 5,921
3
votes
2
answers
5k
views
Div elements to follow a curved path with CSS3
So the basic idea is 1 - 9 seats at a curved table as though you are looking at them through first person view. I'm trying to get div elements which would be seats to flow on the outside of another ...
- 427
41
votes
4
answers
63k
views
Make table cells square
How to ensure that each cell of table should become square without using fixed sizes? And be responsive when they change width.
table {
width: 90%;
}
td {
width: 30%;
}
tr {
/** what ...
11
votes
4
answers
19k
views
CSS: dots in corners of div
I'm trying to put a dot in each corner of a container. I'm thinking the trick to this is a combination of .my-container:before and setting the :before's border or background property. The effect I ...
- 40.7k
10
votes
2
answers
11k
views
How to create a curve tail for speech bubble with CSS?
I'm creating a speech bubble with CSS and I have reached this far.
.says{
width: 200px;
padding: 20px;
margin-right: 20px;
background: #BF7EF2;
color: #fff;
box-shadow: -3px 3px ...
8
votes
4
answers
9k
views
How to use skew only in the parent element?
Is there any way to use skew only in a parent element?
I need to create something like a 'diamond' as a mask and the child elements can't be affected. There is no way, in this case, to use png as a ...
- 37.6k
3
votes
1
answer
6k
views
CSS arrow on an image (without using borders)
I'm trying to figure out a way to use attach an arrow to the bottom of a masthead image, like this. I've seen a number of methods on how to create arrows with CSS3, but I've found they almost always ...
- 37.6k
20
votes
8
answers
25k
views
Transparent half circle cut out of a div
I would like to make a transparent cut out half circle shape using only CSS3. The only requirement is that all the elements that form the shape must be black or transparent.
I cannot use a black ...
- 37.6k
3
votes
2
answers
4k
views
Is it possible to make a "double arrow" with css3 content technique?
Im looking for a way to recreate this button with CSS only.
I know about the triangle technique and I also know how to add a border to it, but unfortunately I don't know any way to recreate this ...
- 37.6k
32
votes
8
answers
75k
views
HTML5 / CSS3 Circle with Partial Border
Is it possible to create a circle using only HTML5 / CSS3 which has a border that only goes part way around the circle? If not, what techniques can I use to accomplish this effect? I would prefer to ...
- 37.6k
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 ...
- 64k
8
votes
2
answers
13k
views
Progress bar along the borders of a rectangle
I'm trying to figure out how to implement progressbar around rectangle. Let's image that I have div 500x300 with 5px (black) border.
I would like that progress bar started in left top corner then goes ...
- 4,050
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;
}
....
- 280k
23
votes
7
answers
98k
views