I'm trying to create a component where there is a hollow circle that is cropped at the bottom-left corner:
I've attempted to do so with the pseudo classes below but am facing two issues after working with it for a while (dimensions of the circle are not the same, but I will address this later):
The circles overflow outside of the component
The positioning of the circles changes depending on where the element is used.
#element {
max-width: 750px;
height: 350px;
border-radius: 8px;
background-color: #008001;
}
#element:before {
content: '';
position: absolute;
width: 100px;
height: 100px;
z-index: 1;
background: #008001;
border-radius: 50%;
top: 290px;
right: 94%;
}
#element:after {
content: '';
position: absolute;
width: 150px;
height: 150px;
background: #fff;
opacity: 0.5;
border-radius: 50%;
top: 260px;
right: 92%;
}
<div id="element"></div>
Set overflow:hidden to #element. SO `we can hide overflowing content of ::before CSS. Also set #element to position:relative, which set's boundary for ::before when we try to set it after making it absolute.
Once above =e things are done, just apply #element::before to bottom:-50px and left:-50px, I have used 50px as height and width were set to 100px.
Then to get the border just set border:25px solid #yourolor.
#element {
max-width: 750px;
height: 350px;
border-radius: 8px;
background-color: #008001;
overflow: hidden;
position: relative;
}
#element:before {
content: '';
position: absolute;
width: 100px;
height: 100px;
z-index: 4;
background: #008001;
bottom: -50px;
left: -50px;
border-radius: 100%;
border: 25px solid #c5ffc6;
}
<div id="element"></div>
Related
Hi I have a question about my code.
Here is my problem.
I have two items and one frame. Frame has position relative a two items (children) have position absolute. They should be always on the same point inside my frame but when I am resizing the position of children are different in relation with frame. How to make the children always stay on same position for responzive design? Is it possible?
Try to change height of window in example too (not only width)
https://codesandbox.io/s/adoring-jackson-c6fth?file=/index.html:0-900
.frame {
width: 70vh;
height: 90vh;
border: 10px solid red;
margin: 10px auto;
position: relative;
}
.objA {
width: 130%;
position: absolute;
height: 40%;
bottom: -10%;
left: -20;
border: 2px solid green;
background: rgba(10, 101, 10, 0.7);
z-index: 2;
}
.objB {
width: 10%;
position: absolute;
height: 20%;
bottom: 20%;
left: 30%;
background: red;
z-index: 1;
}
<div class="frame"></div>
<div class="objA"></div>
<div class="objB"></div>
I post here my real example image for better imagination what the problem is.
All objects are positioned absolute (Waves, stars, robot etc...) Each wave should in every resized situation be in same position. Good to know is that every wave is separatly.
Make sure the positions and heights/widths are all in percents and most important: place your items inside the main <div class="frame"></div> element. You can start this way:
* {
box-sizing: border-box;
}
body {
background: none #014653;
margin: 0;
}
.frame {
width: 70vw;
height: 90vh;
border: 10px solid #5cb9b8;
background: none #5cb9b8;
margin: 5vh auto;
position: relative;
border-radius: 6px;
}
.frame-stage {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #a2cece;
background: none #014653;
border-radius: 5px;
}
.objA {
width: 10%;
position: absolute;
height: 20%;
bottom: 10%;
left: -20;
border: 2px solid green;
background: rgba(10, 101, 10, 0.7);
z-index: 2;
}
.objB {
width: 10%;
position: absolute;
height: 20%;
bottom: 30%;
left: 30%;
background: red;
z-index: 1;
}
<div class="frame">
<div class="frame-stage">
<div class="objA"></div>
<div class="objB"></div>
</div>
</div>
Updated codesandbox here.
I want to remove most of the circle and only show the part of the circle that overlaps a square:
I need to cut the red area and leave the darker green area inside the box.
I have a class named circle with a style
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
and a box with style:
width: 100px;
height: 100px;
How can I remove the red area?
My code: https://codepen.io/anon/pen/xpVJoL
You can use negative values for position and overflow:hidden to hide (cut) the area :
.box {
width: 100px;
height: 100px;
border: 1px solid;
position:relative;
overflow:hidden;
}
.circle {
position: absolute;
bottom: -50px;
left: -50px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
<div class="box">
<div class="circle"></div>
</div>
UPDATE
And if you want a more fancy way you can use radial-gradient as background and you will have much less code to handle :
.box {
width: 100px;
height: 100px;
border: 1px solid;
background-image:radial-gradient(circle at bottom left, red 45%, transparent 0%);
}
<div class="box">
</div>
Just insert overflow:hidden; in the .container class.
You don't need another div, you can just do it with the :before or :after pseudo-elements:
div {
width: 100px;
height: 100px;
position: relative;
border: 1px solid;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: -50%;
border-radius: 50%;
background: red;
}
<div></div>
div {
margin: 50px;
position: relative;
background-color: red;
width: 200px;
height: 50px;
border: 2px solid black;
}
div::after {
content: '';
position: absolute;
background-color: green;
width: 100px;
height: 100px;
border-radius: 100%;
top: -25px;
left:50px;
border: 2px solid black;
}
div.overflow-hidden {
overflow: hidden;
}
<div>1st</div>
<div class="overflow-hidden">2nd</div>
1st case: as expected.
2nd case[overflow-hidden]: Middle part of top and bottom border should be green. Looks like circle is not above its parent div's border. Is there any way to make it above it? Whats happening here? Will the z-index work?
Why is this happening?
This is because overflow: hidden; clips the content to the content box.
hidden
Content is clipped if necessary to fit the content box. No scrollbars
are provided.
MDN Web docs - https://developer.mozilla.org/en/docs/Web/CSS/overflow
This can be seen in the first example below as I have changed the border to be transparent.
What can you do?
One way to get around this would be to apply the border using an absolutely positioned pseudo element instead of to the containing div.
div {
background-color: red;
height: 50px;
margin: 50px;
overflow: hidden;
position: relative;
width: 200px;
}
div::after {
background-color: green;
border: 2px solid black;
border-radius: 100%;
content: '';
height: 100px;
left: 50px;
position: absolute;
top: -25px;
width: 100px;
}
div.overflow-with-border {
border: 2px solid transparent;
}
div.overflow-with-pseudo {
padding: 2px;
}
div.overflow-with-pseudo::before {
border: 2px solid black;
box-sizing: border-box;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div class="overflow-with-border">1st</div>
<div class="overflow-with-pseudo">2nd</div>
This question already has answers here:
Inset border-radius with CSS3
(8 answers)
Closed 6 years ago.
Please help me out i want to make a div like this
Method # 01:
Use raidal-gradient:
body {
background: #f0f0f0;
margin: 0;
}
.box {
background: radial-gradient(circle at bottom right, transparent 60px, #000 60px);
height: 150px;
width: 250px;
}
<div class="box"></div>
Method # 02:
You can create it with combination of :before or :after pseudo element and box-shadow css property.
body {
background: #f0f0f0;
margin: 0;
}
.box {
position: relative;
overflow: hidden;
height: 150px;
width: 250px;
}
.box:before {
box-shadow: 0 0 0 1000px #000;
border-radius: 100%;
position: absolute;
bottom: -30px;
height: 100px;
right: -35px;
width: 100px;
z-index: -1;
content: '';
}
<div class="box"></div>
The easiest method will be using a pseudo element. By absolutely positioning the :after element, you can get the desired effect.
.box {
background: #000;
width: 300px;
height: 150px;
position: relative;
}
.box:after {
content: '';
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: #fff;
right: -75px;
bottom: -75px;
}
<div class="box"></div>
Try this CSS,
.rec{
height: 200px;
background: black;
position: relative;
width:600px;
}
.rec:after {
content: '';
position: absolute;
bottom: -20px; right: -20px;
border-bottom: 100px solid white;
border-left: 100px solid white;
width: 0;
background:#fff;
border-radius:150px;
}
here is my issue:
<div class="wrap">
<div class="inner"></div>
</div>
.wrap {
position: relative;
width: 200px;
height: 66px;
background: black;
overflow: hidden;
border-radius: 100px;
}
.inner {
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
background: white;
}
http://jsfiddle.net/cjW7Q/1/
Notice thin black line on the right side.
Any ideas how to get rid of it?
UPDATE
There is a lot of workarounds, but problem is that overflow:hidden doesn't work correctly. Imagine that instead of .inner I have an image, that I want to move around with transition using transform (for hardware acceleration). I'll try to update demo later.
<edit>multiple bg mixing image and gradient can be used with animation too without extra markup DEMO </edit>
This is a commun defaut , you see it in FF too.
I would say , paint it the other way round :
.wrap doesn't even need a bckground color.
http://jsfiddle.net/cjW7Q/2/
.wrap {
position: relative;
width: 200px;
height: 66px;
overflow: hidden;
border-radius: 100px;
}
.inner {
position: absolute;
top: 0;
width: 50%;
left:0;
bottom: 0;
background: black;
}
Else you can use a gradient and no inner element:
.wrap {
position: relative;
width: 200px;
height: 66px;
overflow: hidden;
border-radius: 100px;
background:linear-gradient(to left,white 50%,black 50%);
}
DEMO
Here's a Work Around
.inner {
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 0;
background: black;
}
Apply the same background of it's parent for the parent element (here there's no need of background at all)
Add "border-right-width: 0px;" to .wrap.
Try this CSS,
.wrap {
position: relative;
width: 200px;
height: 66px;
background: black;
overflow: hidden;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.inner {
position: absolute;
top: 0;
right: 0;
left: 50%;
bottom: 0;
background: white;
}
DEMO
border:0px
paddind : 10 px
background:#FFF