css-shapes Questions
10
I am trying to draw a rectangle and I found the website for css code(http://css-tricks.com/examples/ShapesOfCSS/). How do I put together in HTML? In other words, how do I define #rectangle in HTML....
Attack asked 19/12, 2013 at 19:47
7
Solved
Here is a simple convex example.
http://jsfiddle.net/swY5k/
#test{
width: 200px;
height: 200px;
background: #888888;
border-radius: 50px;
}
However, I want a concave border radius.
I tried...
Cooperage asked 5/5, 2013 at 19:5
6
Solved
So, I'm trying to achieve this result:
This is what I got when I tried: https://jsfiddle.net/wvdkmjge/
.container {
width: 100px;
height: 1px;
background-color: black;
}
.circle {
...
Motherinlaw asked 23/1, 2016 at 21:54
3
Solved
Looking to create this:
What would be the best way to achieve it?
IT MUST:
I'd definitely like to keep the text as text (so not using an image). Also, I'd like this to be re-usable so that I c...
Gaspar asked 22/8, 2012 at 11:21
6
Solved
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'...
Neom asked 13/9, 2013 at 20:45
2
Solved
I need to draw two curves, using CSS.
I have tried to assemble some divs, using CSS border-radius to draw the curved panel. But the result is bad. Any better arithmetic?
Emmieemmit asked 24/6, 2015 at 9:21
6
I am trying to make a corner ribbon in a div and its going everywhere I want it to look neat and nice it goes over the div and does not sit well.
/* The ribbons */
.corner-ribbon {
width:...
Chasse asked 28/5, 2015 at 10:26
6
Solved
I would like to have an percent circle indicator on my site:
In this case it's showing 75%. How should this be done? I have the yellow circle in a image-file, but if it's easier to, some how, do...
Jetblack asked 30/3, 2015 at 15:43
5
Solved
I have a div called .testimonial-inner and using the :after pseudo element I have an arrow that sits underneath it pointing down. The problem I'm having is adding a box-shadow to it all so they bot...
Tao asked 19/1, 2015 at 21:17
5
Solved
How can I style a a circle (a div) with two borders responsively so that it reacts to a container's size?
Suppose circles like this for example:
Here is a working CSS for a circle:
div.ci...
Tinatinamou asked 30/11, 2013 at 21:3
3
Solved
I need to make a circular progress bar (image below),
loading start from left bottom side up to right bottom side. Light-blue (#E8F6FD) color is empty state and strong-blue (#1CADEB) is progress.
...
Sabellian asked 16/1, 2016 at 11:37
19
Solved
How to draw the tick symbol using CSS? The symbols I find using Unicode isn't aesthetically-pleasing.
EDIT
Icon fonts are a great suggestion. I was looking for something like this.
Sibilate asked 23/2, 2014 at 12:59
5
Solved
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?
Decarbonate asked 6/1, 2013 at 17:3
2
I am trying to get two divs to fit the full width of the page but split in half with a diagonal line.
How can I achieve this with two divs through CSS? it is for a slider and needs content added...
Famed asked 9/7, 2015 at 8:58
8
Solved
I'm trying to recreate this image with CSS:
I would not need it to repeat. This is what I started but it just has a straight line:
#wave {
position: absolute;
height: 70px;
width: 600px;
b...
Metopic asked 19/6, 2013 at 22:38
7
Solved
I am trying to take this css Octagon and give it a solid red border. However, when i add the border it only works on portion of the shape. Does anyone have a solution for this?
Here is a JS FIDD...
Pantisocracy asked 6/1, 2016 at 19:52
4
Solved
If I use a pixel or em value for border-radius, the edge radius is always a circular arc or a pill shape even if the value is greater than the largest side of the element.
When I use percentages,...
Kinzer asked 30/4, 2015 at 11:27
2
Solved
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 (...
Bronchiole asked 22/6, 2023 at 11:23
4
Solved
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...
Sisterhood asked 3/4, 2014 at 10:56
10
Solved
I'd like to achieve a custom-colored shape like this using no Javascript:
Currently I'm overlaying an image of the 'frame' over an orange rectangular div, but this is pretty hacky.
I suppose I co...
Whilst asked 21/1, 2013 at 20:29
7
Solved
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...
Continent asked 3/5, 2016 at 9:34
6
Solved
I'm trying to create a circle with CSS, which looks exactly like on the following picture:
...with only one div:
<div class="myCircle"></div>
and by using only CSS definitions. No...
Signora asked 14/3, 2014 at 21:0
5
Solved
Is there a way to make the following:
#id {
border-radius: 100px;
width: 100px;
height: 100px;
}
<div id="circle">
<h3>Hello</h3>
</div>
A round div ...
Screen asked 14/1, 2016 at 11:31
7
Solved
So, I need to make a repeating hexagonal pattern, using CSS. If images are needed, I can go there, but I'd prefer to just use CSS if possible.
Here's an idea of what I'm trying to create:
Basic...
Analysis asked 8/4, 2012 at 12:45
7
Solved
I want to create a shape, which i would describe as "inverse circle":
The image is somehow inaccurate, because the black line should continue along the outer border of the div element.
Here is ...
Disreputable asked 8/5, 2012 at 15:17
1 Next >
© 2022 - 2024 — McMap. All rights reserved.