First of all Thank you for the solutions,
I want to create a progress bordered div using HTML and CSS. Similar to the attached image.
I need it with rounded borders.
:root {
--count: 60%;
}
body {
display: flex;
min-height: 100vh;
margin: 0;
}
div {
margin: auto;
width: 200px;
height: 160px;
border-radius: 20px;
position: relative;
border: 1px solid #ddd;
background-color: white;
}
div::after {
content: '';
display: block;
position: absolute;
left: -3px;
top: -3px;
right: -3px;
bottom: -3px;
background-color: transparent;
background-image: conic-gradient(orange, orange var(--count), transparent var(--count));
z-index: -100;
border-radius: 21.5px;
}
<div></div>
Related
This question already has answers here:
Curve bottom side of the div to the inside with CSS
(2 answers)
Closed 4 years ago.
I have added 2 pictures here. You can see that first curve is down curve and second one is up curve.
Now, I have a rectangle box using CSS. I want to make the top and bottom border should be like the picture.
I can use CSS border-radius property to make a border curve. But I don't understand how can I make this type of border curve using CSS3?
Updated:
Here is the full output I desire:
I used before after to achieve this
div{
width: 400px;
height: 200px;
background-color: #333;
position: relative;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
div:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div></div>
Update
after OP's recent comment, here you can add content in content-main div
.content{
background-color: #333;
width: 400px;
}
.content-top, .content-bottom{
width: 400px;
height: 100px;
background-color: #333;
position: relative;
overflow: hidden;
}
.content-top:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.content-bottom:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.content-main{
padding: 10px;
}
<div class="content">
<div class="content-top"></div>
<div class="content-main">
<h1>Cat</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS11TbGOYA0EmL-usNpArFE8o17OSRSilYYohX1lgyxaP43M2Pt">
</div>
<div class="content-bottom"></div>
</div>
You can achieve this using two Divs one with black background and the children with white background and rounded borders. The wrapper should have a padding to simulate border thickness:
#wrapper{
background:#000000;
width:600px;
height:200px;
padding:10px;
}
#roundCurve{
background:#ffffff;
width:600px;
height:200px;
border-bottom-left-radius:50% 50px;
border-bottom-right-radius:50% 50px;
border-top-left-radius:50% 50px;
border-top-right-radius:50% 50px;
}
<div id="wrapper">
<div id="roundCurve"></div>
</div>
Here is an example you can follow:
body {
background: black;
}
.roundCorner {
width: 150px;
height: 100px;
padding: 2em;
border-bottom: 0;
position: relative;
background: white;
border-radius: 1em 1em 0 0;
}
.roundCorner:before {
position: absolute;
left: -1px;
right: -1px;
top: 0;
height: 1.5em;
border: 1px solid black;
border-top: 0;
border-radius: 0 0 3em 3em;
content:'';
background: black;
}
.roundCorner:after {
position: absolute;
left: -1px;
right: -1px;
bottom: 0;
height: 1.5em;
border: 1px solid black;
border-bottom: 0;
border-radius: 3em 3em 0 0;
content: '';
background: black;
}
<div class="roundCorner"></div>
You can change background of body, .roundCorner, .roundCorner:before, .roundCorner:after to see how it's working.
I've got a problem with border-radius on wrapper that contains an overflow hidden.
I use a before pseudo element (pink background) to fill the wrapper's background. The wrapper has already a background (blue).
#wrapper {
background: blue;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
With this example, we can see an unwanted blue pixel on the top and bottom left corner.
The pseudo element must be in position absolute to apply animation. I removed the animation for the example.
How can I fix this?
A fix is here. Apply overflow:hidden an width:300px to the outer div #container.
#container {
width: 300px;
overflow: hidden;
border-radius: 12px;
}
#wrapper {
height: 90px;
background: blue;
border-radius: 12px;
position: relative;
box-sizing: border-box;
border: 2px solid pink;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
right: -30px;
position: absolute;
top: 0;
width: 30px;
border-radius: 50%;
transition: transform 0.3s;
}
#wrapper:hover::before {
transform: scale3D(10, 10, 1);
}
<div id="container">
<div id="wrapper"></div>
</div>
You found a really interesting rendering issue. My idea to solve it, is switch the colors and logic a little:
#wrapper {
background: pink;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: blue;
content: '';
display: block;
height: 100%;
right: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
I am trying to style button like this:
Now I first though I could just style it with an ::after element attached to the button.
Currently I have this (using sass syntax):
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
z-index: 10;
&::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -2;
}
}
But this renders something which looks a little different:
The rectangle more to the right is my :afterelement.
It is indeed behind the text «Button» (without the z-Index it would just be in front), but it does not go behind the other rectangle.
How could I style this correctly?
Thanks for the help
Cheers
Remove the z-index: 10 from the button. When the parent element (button in this case) have a z-index value it becomes the root element of the stacking context, and you can't move the child under it.
You can read more about stacking context and stacking order in the great article What No One Told You About Z-Index.
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
}
button::after {
content: '';
display: block;
position: absolute;
top: -10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
body {
padding: 20px;
}
<button>Button</button>
I have added a few little things to the code. but this seems to work for me. There might be a simpler way, but the flip, flip works. :)
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
left: 20px;
z-index: 10;
transform: rotateY(180deg);
}
button::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
.buttonz{
transform: rotateY(180deg);
}
<button>
<div class="buttonz">
Button
</div>
</button>
I am looking for a way of creating a "Spiral" in CSS.
Here is an image to make it a bit more clear what I am trying to achieve:
So a partial circle with an outline that gets bigger.
Ideally I want to be able to set the length of the Spiral. (from (0) to 360°)
Also it would be nice to place a cricle at the end (just like in my sample)
Here is a codesnippet of what I came up so far.
* {margin: 0; padding: 0;}
div {
box-sizing: border-box;
width: 200px; height: 200px;
margin: 0 auto;
background: #fff;
border-top: 30px solid #fd0;
border-right: 40px solid #fa0;
border-bottom: 60px solid #f50;
border-left: 0 solid blue;
border-radius: 50%;
position: relative;
}
div::after { /* kreis */
content: "";
position: absolute; top: 80%; left: 8%;
width: 90px; height: 90px;
background: red;
border-radius: inherit;
}
div::before { /* hide the stuff that is too much. */
content: "";
position: absolute; top: 50%; left: 0;
width: 50px; height: 100%;
background-color: inherit;
}
<div></div>
I would also accept an svg way of doing this.
this what i came up with some tweaking Css and html i guess it similar to the image DEMO Not tested on IE not sure whether responsive it is
.spiral{
background-color:black;
width: 100px;
height:100px;
border-radius:50%;
}
.spiral:before{
content: '';
width: 27px;
height: 43px;
background-color: white;
position: absolute;
border-top-right-radius: 144px;
border-bottom-left-radius: 61px;
border-bottom-right-radius: 88px;
left: 53px;
top: 25px;
}
.spiral:after{
content: '';
width: 68px;
height: 52px;
background-color: white;
position: absolute;
left: 4px;
top: -11px;
transform: rotateZ(200deg);
}
<div class="spiral"></div>
Im using an image sprite with transparency which im applying to pseudo content. I need a coloured rounder border around the image.
This is what I have so far:
http://codepen.io/anon/pen/bpmGaz
<div class="icon"></div>
.icon:after {
content: "";
display: inline-block;
background-color: gold;
background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
background-position: -129px -40px;
height: 100px;
width: 100px;
}
.icon {
margin: auto;
margin-top: 100px;
position: relative;
width: 100px;
}
.icon:before {
content: "";
display: inline-block;
background: gold;
position: absolute;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 100%;
}
However I need it to look like this:
I can do this with additional pseudo content (see below) but the code is getting a bit messy. Is there a shorter way to do this?
http://codepen.io/anon/pen/VaEwQy
.icon:after {
content: "";
display: inline-block;
background-color: gold;
background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
background-position: -129px -40px;
height: 100px;
width: 100px;
}
.icon {
margin: auto;
margin-top: 100px;
position: relative;
width: 100px;
}
.icon:before {
content: "";
display: inline-block;
background: gold;
position: absolute;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 100%;
}
I tried using the outline property however sadly it doesn't work cross browser with border-radius.
Adding this code to your pseudo-element seems to do the trick:
border: 50px solid gold;
border-radius: 100%;
http://codepen.io/anon/pen/aNRzmE