css-shapes Questions
7
Solved
How do I draw a horizontal line in between 2 circles in CSS?
It has to be in the middle of them just as shown in the screenshot.
Example here:
I have drawn the 2 circles, but don't know how t...
Alcuin asked 17/10, 2016 at 0:49
6
Solved
Is there any way to create a sharp flat corner with CSS and HTML?
Something like this:
____
/ \
| |
\____/
Salpingotomy asked 4/6, 2012 at 15:33
4
Solved
I'm trying to create a ring shape in css, divided into 4 quarters.
Each quarter will represent a button.
I've been playing around with the following code:
#quarterCircleTopLeft{
width:100px;
he...
Epiboly asked 28/4, 2013 at 13:30
4
I'd like to create a shape like the one displayed below entirely in CSS. As you can tell, it would take a bit more tweaking than simply applying rounded corners...
Can it be done?
Maurita asked 24/1, 2013 at 18:25
19
Solved
How do you draw a circle using HTML5 and CSS3?
Is it also possible to put text inside?
Overall asked 3/8, 2011 at 4:53
3
Solved
I was working on canvas 3D shapes I am very new to this. I am trying to create Pure css3d cylinder without any plugin.
Here is what I am trying and with the output code, I am getting a circle.
CSS ...
Rembrandt asked 10/7, 2014 at 7:36
6
Solved
Is it possible to make the below gradient look more "blocky", so that instead of switching from green to red gradually, it's done in steps like the below picture?
Desired effect:
Currently:
...
Carburetor asked 22/12, 2014 at 16:9
7
Solved
I want to make a Table like this
is it possible to add a slanted diagonal border in table?
Saccharometer asked 10/2, 2015 at 6:38
3
Solved
I created this border design in Photoshop and was wondering if anyone could give me some guidance with how to recreate this using css.
Lucrece asked 17/9, 2014 at 16:35
5
Solved
I am working on a project that calls for two triangles to hold background images, and be links.
Here is my mock up for how I would like the two triangles.
Currently, I have just two divs that...
Genipap asked 10/6, 2012 at 15:25
16
Solved
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?
Karylkarylin asked 6/9, 2011 at 18:56
3
Solved
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 1...
Brynne asked 14/1, 2021 at 20:28
10
Solved
I loaded in multiple images on my website from the internet. Is it possible to give all those images an hexagon shape in a responsive grid?
<div>
<img src="link" class="Image">
...
Hendley asked 30/9, 2014 at 7:18
3
Solved
I have a project where I need to insert speech bubbles / message boxes. The general shape I am trying to achieve is this one :
.bubble {
height: 100px;
width: 200px;
border: 3px solid gray;...
Reflation asked 18/5, 2015 at 9:8
6
Solved
This is my CSS.
CSS
#hexagon-circle {
width: 100px;
height: 55px;
background: red;
position: relative;
border-radius: 10px;}
#hexagon-circle:before {
content: "";
position: absolute...
Automatize asked 18/7, 2014 at 7:42
15
Solved
I'm wondering if there's an easier way to create circular divs than what I'm doing now.
Currently, I am just making an image for each different size, but it's annoying to do this.
Is there anyway...
Armorial asked 30/1, 2011 at 2:19
13
Solved
I have a div for a preview box:
.preview-content {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUV...
Seadon asked 2/8, 2013 at 8:41
5
Solved
How can I create border corner spacing with CSS like the picture below? The height of the content is not fixed.
Sculpture asked 2/9, 2015 at 15:12
3
Solved
I am currently having problems creating a 'tank gauging system' within my project. I am using MVC and the by using the following markup, I have achieved this:
by using:
#container {
position:abso...
Shantell asked 18/11, 2014 at 10:7
4
Solved
What I'd like to do:
I would like to create a radial menu as shown below, considering all elements in the picture interactive, i.e the image in centre as well as the four quarters around it....
Dialyser asked 17/3, 2015 at 16:40
3
Solved
this is how i made circle with only stroke and no fill
fill: none !important;
stroke-width: 1px;
I want double stroke.
Devoted asked 3/9, 2015 at 7:30
3
Solved
I want to make a div, with a triangle at the bottom.
But I need the background image on the triangle to appear, I've tried using a pseudo element (:after) but it doesn't work.
#homebg:after{
cont...
Savarin asked 26/10, 2015 at 10:5
5
Solved
I am looking for a way to create an incomplete square with borders with some text and a background with pure css. Here is what I am trying to achieve:
My initial idea is to create the shape base...
Albinus asked 27/1, 2016 at 6:46
7
Solved
Is it possible to cut out a hollow circle using only CSS?
This we can all do:
But can we do this?
The circle must be hollow and transparent. Thus the problem is not solved by putting a solid...
Lingo asked 27/11, 2011 at 15:16
4
Solved
I would like to make a transparent arrow over an image. This triangle should be indented in a semi transparent block and show the background image.
Desired output:
.barShow {
background-c...
Godin asked 20/5, 2014 at 11:44
© 2022 - 2024 — McMap. All rights reserved.