css-shapes Questions
23
Solved
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 tra...
Nickelsen asked 16/8, 2011 at 3:54
15
Solved
Well, drawing a circle with pure CSS is easy.
.circle {
width: 100px;
height: 100px;
border-radius: 100px;
border: 3px solid black;
background-color: green;
}
How do I draw a sector? Given ...
Phyllome asked 18/1, 2014 at 14:50
15
Solved
I've got a div that looks like a orange square
I'd like to draw a white X in this div somehow so that it looks more like
Anyway to do this in CSS or is it going to be easier to just draw this...
Vicentevicepresident asked 20/9, 2013 at 15:31
8
Solved
I want to make an oval like:
But when i used this code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<titl...
Brusquerie asked 16/11, 2014 at 19:39
7
Solved
I know it's possible to create a hexagon shape using the following code:
.hex:before {
content: " ";
width: 0; height: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
...
Ketchup asked 17/10, 2013 at 4:47
2
Solved
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; ...
Remington asked 1/6, 2019 at 13:8
6
I need to make like this. Is it possible with pure css?
Laubin asked 17/1, 2012 at 13:19
5
Solved
I am trying to make a point burst thing like the image below:
Currently, I have tried this using pseudo elements, however, I was only able to generate a 12 point burst and does not reflect that ...
Smukler asked 9/6, 2015 at 10:32
6
Solved
I have this image/polygon defined in css like this:
.post-wrapper {
position: relative;
width: 250px;
height: 420px;
float: left;
background-color: #ddc;
-webkit-clip-path: polygon(50% 100%,...
Karena asked 31/5, 2014 at 13:29
4
Solved
<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 border-r-30 bg-transparent"...
Facile asked 16/4, 2021 at 23:56
5
Solved
I'm building a wizard-like ordering process where I have this menu:
The active page is colored green (in this case, Model).
How does one make this arrow using only CSS?:
At the moment i'm ach...
Infusion asked 24/12, 2014 at 11:41
6
Solved
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 ...
Rosin asked 8/10, 2013 at 13:0
7
Solved
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...
Cyruscyst asked 4/12, 2014 at 16:23
1
Solved
I am trying to make some HTML and CSS look like a receipt. I want the bottom of this receipt to look like it was torn off. I have gotten an ::after style that looks close to what I want, however on...
Tavern asked 31/8, 2022 at 20:53
10
I have a css code:
-moz-border-radius-topleft:50px;
I get the result:
Is there any possibilities to give like this:
Incertitude asked 25/10, 2010 at 5:46
5
Solved
I have the below CSS code which gives the + symbol but not matches the design basically it needs to be thin. See snippet and codpen
.plus {
position:relative;
border: 1px dotted white;
w...
Featherstone asked 21/3, 2019 at 13:36
6
Solved
I want to do an ellipse like the image with CSS, but I can't.
I've made that ellipse (blue one looking like "pacman") with figma and figma doesn't tell me how to do the css of the ellipse, only th...
Hampstead asked 25/3, 2019 at 17:19
4
Solved
I've been working on a header with a zigzag border. One way to do this is to use images to make the zigzag effect.
(1) Is there any way to create a practical cross-browser zigzag border in CSS wit...
Twitch asked 20/8, 2012 at 1:23
8
I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%.
I would like it to stop at certain percentages like in th...
Carapace asked 8/1, 2013 at 19:0
2
Solved
Is there any issue with using a border-radius that is much larger than an element's dimensions?
For example, if I wanted to make a class .circle like so:
.circle {
border-radius: 1000px;
}
So now...
Ravioli asked 15/8, 2013 at 19:46
6
Solved
I'm looking for a way of to do a cross-browser iphone-like badge in CSS3. I'd obviously like to use one div for this, but alternative solutions would be fine. The important factor is that it needs ...
Batson asked 26/1, 2011 at 3:26
8
Does anyone know how to draw concentric circles like the RAF symbol (concentric red, white and blue circles) using only CSS?
Jaf asked 21/2, 2015 at 14:23
8
Solved
Im trying to do the following x icon, exactly the way it is in here:
So here is the html:
<div class='error-circle'>
<div>X</div>
</div>
And here is the css:
.error-...
Sporogony asked 17/12, 2014 at 13:34
3
Solved
I'm trying to figure out the best way to build an animated hexagon menu.
Please, see the following image for better understanding:
The hexagon burger button is in the center. Once clicked, it re...
Hautboy asked 18/4, 2015 at 13:4
9
Solved
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: re...
Vaporous asked 6/8, 2015 at 11:9
© 2022 - 2024 — McMap. All rights reserved.