I'm trying to use clip-path to cut out a curved shape from my div(blue part) but clip-path circle doesn't have that option I guess. I want to use clip-path as that will be responsive by default; instead of :after cause it messes up everything in small screens. This is a photo of what I want to achieve:
This is the code:
.bg-overlay {
width: 76%;
min-height: 100vh;
background-color: darkblue;
position: absolute;
top: 0;
left: 0;
clip-path: circle(90% at 50px 23px);
}
.wrapper {
width: calc(100% - 40px);
height: calc(100vh - 40px);
margin: 20px;
background: cyan;
z-index: 0;
}
<div class="bg-overlay"></div>
<div class="wrapper"></div>
You can use a radial gradient to achieve this effect by creating a transparent circle "inside" the background color you want:
.bg-overlay {
width: 100%;
min-height: 100vh;
position: absolute;
top: 0;
left: 0;
background: radial-gradient(circle at 100% 90%, transparent 49.9%, darkblue 50%);
}
.wrapper {
width: calc(100% - 40px);
height: calc(100vh - 40px);
margin: 20px;
background: cyan;
z-index: 0;
}
<div class="bg-overlay"></div>
<div class="wrapper"></div>
I think applying the clip-path to the other div does the trick. Or I might be misunderstanding your question.
body { margin: 0; }
.wrapper {
width: 100%;
min-height: 100vh;
background-color: darkblue;
}
.bg-overlay {
width: 100%;
height: 100vh;
background: cyan;
z-index: 0;
clip-path: circle(90% at 115% 70%);
position: absolute;
top: 0;
right: 0;
}
<div class="bg-overlay"></div>
<div class="wrapper"></div>
Related
As such: https://i.stack.imgur.com/UdHNE.png
CSS border, clip path, etc?
I've tried the following:
div#box{
width: 38px;
height: 500px;
border: 13px solid black;
border-color: transparent black transparent transparent;
border-radius: 0 100% 100% 0;
}
<div id="box"></div>
But it's not giving me the result I'm looking for (the curve is too subtle).
I've also tried using clip path but the transparent element won't "cut" into the other one obviously since it's transparent.
body {
background-color: lightblue;
}
.one {
height: 500px;
width: 38px;
background-color: white;
clip-path: ellipse(38px 50% at 0% 50%);
position: absolute;
right: 50%;
top: 0;
}
.two {
height: 500px;
width: 38px;
background-color: transparent;
clip-path: ellipse(38px 50% at 0% 50%);
position: absolute;
right: calc(50% + 13px);
top: 0;
}
<div class="one"></div>
<div class="two"></div>
Any help would be greatly appreciated.
Can you please try this and only play with second[180%] and third[-2%] value.
In here we create a required clip-path than we create another div which will create us a middle space and aplly position: absolute ,overflow:hidden to create same clip-path in red div and than we set background-color of middle div as same as screens background-color.
z-index are need to be .one > .middle > .two
clip-path: ellipse(100% 180% at -2% 50% )
body {
position: relative;
min-height: 100vh;
display: flex;
place-items: center;
background-color: bisque;
}
.one{
position: relative;
height: 500px;
width: 500px;
background-color: green;
clip-path: ellipse(100% 180% at -2% 50% ) ;
z-index: 3;
}
.middle{
position: absolute;
z-index: 2;
height: 500px;
width: 500px;
clip-path: ellipse(100% 180% at -2% 50% ) ;
left:25px;
overflow: hidden;
background-color: bisque;
}
.two{
position: relative;
z-index: 1;
right:25px;
height: 500px;
width: 500px;
background-color: red;
}
<div class="one"></div>
<div class="middle"></div>
<div class="two"></div>
I want to do this:
So far I got this:
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #red;
z-index: 10000;
height: 10px;
overflow: visible;
}
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 10px 10px 50px 50px;
}
<div class="header"></div>
Codepen.
I can't get the top radius to go outwards the half circle like in the image.
How to do this with CSS?
You cannot make a negative radius on a border.
There is the possibility to make an SVG path or radial gradient... I made a new div as circle and radial gradient on pseudo-elements. It's not perfect, but it will possibly show you the direction to solution :)
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: red;
z-index: 10000;
height: 10px;
overflow: visible;
}
.header-circ {
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 500px;
height: 250px;
border-radius: 10px 10px 250px 250px;
}
.header-circ::before, .header-circ::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
z-index: -1;
}
.header-circ::before {
left:-94px;
background: radial-gradient(circle at bottom left, white 0%,white 75%,red 75%);
}
.header-circ::after {
right:-94px;
background: radial-gradient(circle at bottom right, white 0%,white 75%,red 75%);
}
<div class="header"></div>
<div class="header-circ"></div>
Here's a quote from W3C on how transform establishes a new containing block:
For elements whose layout is governed by the CSS box model, any value
other than none for the transform property also causes the element to
establish a containing block for all descendants. Its padding box will
be used to layout for all of its absolute-position descendants,
fixed-position descendants, and descendant fixed background
attachments.
And here's their example code:
<style>
#container {
width: 300px;
height: 200px;
border: 5px dashed black;
padding: 5px;
overflow: scroll;
}
#bloat {
height: 1000px;
}
#child {
right: 0;
bottom: 0;
width: 10%;
height: 10%;
background: green;
}
</style>
<div id="container" style="transform:translateX(5px);">
<div id="bloat"></div>
<div id="child" style="position:fixed;"></div>
</div>
My problem is that the W3C example doesn't work as expected in Firefox. The green div doesn't stay fixed when I scroll — try running the snippet yourself.
My own example has exactly the same problem (the red divs don't stay fixed when I scroll):
.inner-container {
width: 72vw;
height: 72vh;
transform: translateZ(0);
overflow-y: scroll;
box-sizing: border-box;
border: 2px dashed black;
}
.fixed-top {
position: fixed;
height: 20%;
width: 100%;
left: 0;
top: 0;
background: red;
opacity: 0.5;
}
.fixed-bottom {
position: fixed;
height: 20%;
width: 100%;
left: 0;
bottom: 0;
background: red;
opacity: 0.5;
}
.content {
height: 88rem;
background: repeating-linear-gradient(0deg, #fff, #fff 1%, #e2e2e2 1%, #e2e2e2 3%);
}
<div class="inner-container">
<div class="fixed-top"></div>
<div class="content"></div>
<div class="fixed-bottom"></div>
</div>
I don't get it. According to the spec, descendants with position: fixed should not move if their parent has a transform applied, but they do! What gives?
The weird thing is that I can make it work by adding a second container and applying the transform to that instead (now my red divs don't move when I scroll, which is what I want):
.outer-container {
width: 72vw;
height: 72vh;
transform: translateZ(0);
}
.inner-container {
width: 100%;
height: 100%;
overflow-y: scroll;
box-sizing: border-box;
border: 2px dashed black;
}
.fixed-top {
position: fixed;
height: 20%;
width: 100%;
left: 0;
top: 0;
background: red;
opacity: 0.5;
}
.fixed-bottom {
position: fixed;
height: 20%;
width: 100%;
left: 0;
bottom: 0;
background: red;
opacity: 0.5;
}
.content {
height: 88rem;
background: repeating-linear-gradient(0deg, #fff, #fff 1%, #e2e2e2 1%, #e2e2e2 3%);
}
<div class="outer-container">
<div class="inner-container">
<div class="fixed-top"></div>
<div class="content"></div>
<div class="fixed-bottom"></div>
</div>
</div>
But I have no idea why I need to use two containers to make this work. According to the spec I should just be able to apply a transform to the first container, which is so much cleaner. Is this actually possible with one container? I don't have time to learn Kubernetes at the moment.
Here's a CodePen if you want to play with it.
Use position: sticky
There is a fantastic demo at https://developer.mozilla.org/en-US/docs/Web/CSS/position
.inner-container {
width: 72vw;
height: 72vh;
overflow-y: scroll;
box-sizing: border-box;
border: 2px dashed black;
position: relative;
}
.fixed-top {
position: sticky;
height: 20%;
width: 100%;
left: 0;
top: 0;
background: red;
opacity: 0.5;
}
.fixed-bottom {
position: sticky;
height: 20%;
width: 100%;
left: 0;
bottom: 0;
background: red;
opacity: 0.5;
}
.content {
height: 88rem;
background: repeating-linear-gradient( 0deg, #fff, #fff 1%, #e2e2e2 1%, #e2e2e2 3%);
}
<div class="inner-container">
<div class="fixed-top"></div>
<div class="content"></div>
<div class="fixed-bottom"></div>
</div>
the result I need to get:
what i have so far
header {
min-height: 300px;
background: #000;
}
main {
position: relative;
width: 100%;
overflow: hidden;
min-height: 300px;
}
main:before {
content: '';
position: absolute;
background: #000;
top: 0;
left: 0;
width: 100%;
height: 200px;
}
main:after {
content: '';
position: absolute;
top: 0rem;
background: #141f36;
width: 120%;
height: 300px;
margin-left: -10%;
margin-right: 10%;
border-radius: 200vh 200vh 0% 0% / 20vh 20vh 0% 0%;
}
<div class="page">
<header></header>
<main></main>
</div>
I have no idea how to make the line, can someone help me with this?
NOTE: the line needs to have blur/bright/light effect just like in the example image
Here is a single div idea with radial-gradients.
div {
min-height: 400px;
width: 100%;
/* you can change these variables to see what they do */
--top-distance: 3%;
--line-width: 0.3%;
--blur: 0.5%;
--gradient-top-distance: 100px;
--s: 350%; /* increase this to reduce the slope. */
background: radial-gradient(farthest-side at center bottom, transparent 0 calc(100% - (var(--top-distance) + var(--blur)*2 + var(--line-width))), #0c5dd3 calc(100% - (var(--top-distance) + var(--blur) + var(--line-width))) calc(100% - (var(--top-distance) + var(--blur))), transparent calc(100% - var(--top-distance)) 100%) 50% calc(100% + var(--gradient-top-distance))/var(--s) 100% no-repeat,
radial-gradient(farthest-side at center bottom, #141f36 99%, transparent 100%) 50% calc(100% + var(--gradient-top-distance))/var(--s) 100% no-repeat;
background-color: #000;
}
<div></div>
You can add another pseudo element where you apply a blur filter
main {
position: relative;
overflow: hidden;
min-height: 400px;
background: #000;
}
main:before,
main:after{
content: '';
position: absolute;
height:300px;
background: #141f36;
left:-10%;
right:-10%;
bottom:0;
border-radius: 200vh 200vh 0% 0% / 20vh 20vh 0% 0%;
}
main:after {
border:3px solid #0c5dd3;
filter:blur(1px);
bottom:-22px;
background:none;
}
<main></main>
What I'm trying to do is this:
So I gave my banner a border-top-right-radius of 100px 20px. I was kind of able to copy the border-radius in the image. The problem is that I couldn't copy the border. I tried applying border:10px solid #fff and it looks distorted/weird. Here's what I have right now:
With this work around you could get what you want i tried it with border but that doesn't seem to work.
body{background: gray;}
.wrapper {
position: relative;
width: 300px;
height: 200px;
margin: 50px auto;
}
.image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url(https://scproxy-prod.adobecc.com/api?X-Location=https%3A%2F%2Fcc-eu1-prod.adobesc.com%2Fapi%2Fv1%2Fassets%2F3fd53348-7e53-46f1-a1fa-f03a8fe5cb6c%2Frenditions%2Fjpg%2F1200?&v=1473018134655&Authorization=Bearer%20eyJ4NXUiOiJpbXNfbmExLWtleS0xLmNlciIsImFsZyI6IlJTMjU2In0.eyJmZyI6IlFYMjdaT0RKQU1BQUFBQUFBQUFBQUFFTEFBPT09PT09IiwiYXMiOiJpbXMtbmExIiwiYyI6ImhpdWExbFdqQTBzbVpoTFhZSnFqUkE9PSIsInVzZXJfaWQiOiI0ODQ0MjkxRTRGNzA3ODgxMEE0OTBENDVAQWRvYmVJRCIsIm1vaSI6IjE5OTZlMGRiIiwic2NvcGUiOiJBZG9iZUlELG9wZW5pZCxnbmF2LGNyZWF0aXZlX2Nsb3VkLHJlYWRfb3JnYW5pemF0aW9ucyxhZGRpdGlvbmFsX2luZm8uc2NyZWVuX25hbWUsYWRkaXRpb25hbF9pbmZvLnNlY29uZGFyeV9lbWFpbCxhZGRpdGlvbmFsX2luZm8ucm9sZXMsc2FvLmNjcHJpdmF0ZSxzYW8uY2NfZXh0cmFjdCxzYW8uY2NlX3ByaXZhdGUsYWNjb3VudF90eXBlLHNhby5jY3B1Ymxpc2giLCJjcmVhdGVkX2F0IjoiMTQ3MzQ0MDQwOTU5NyIsImlkIjoiMTQ3MzQ0MDQwOTU5Ny0xNjBiYjc2Yy0xNmU0LTQzOTctYjY1ZC0wMDQ4NWQ5M2EzMWMiLCJ0eXBlIjoiYWNjZXNzX3Rva2VuIiwiZXhwaXJlc19pbiI6Ijg2NDAwMDAwIiwiY2xpZW50X2lkIjoiQ3JlYXRpdmVDbG91ZFdlYjEifQ.kgR1X7vFpAnkrQGyY2jbo4dtxPSsugHw4ms9ij-hDbrvJdsr2vO_n3GhbRDlzCA1BSkvbkg54c5w2x4lYiRS965VauxjwmLYlUHsEMCBXQmsMmf-_iT68AL-lh9kcec-y10XVBlYk96KQw84PFHn03x1eQK3xXtlrrtmWhys5lcsjZc2dklrfbcy4TlDYWQfYACCaEg4up3_BVZljr3r8u11eF40tormcJTLW7HqFRQf2QL3IP6u2vu3flSBI5wd_XDQGXusF424Exsv1VV4as24e994w3jH_GvUDo8sffCQFJmb5lEfWZOxwG6SUHAbmYG501FDepjlCaGIp7tCdQ);
background-size: cover;
width: calc(100% - 10px);
height: calc(100% - 10px);
border-top-right-radius: 100px 20px;
z-index: 2;
}
.border {
position: absolute;
top: 0;
left: 0;
background: white;
width: 100%;
height: 100%;
border-top-right-radius: 96px 22px;
z-index: 1;
}
<div class="wrapper">
<div class="image"></div>
<div class="border"></div>
</div>