https://jsfiddle.net/bdef3zcq/1/
I should be able to figure this out on my own, but I am stuck.
.curtain:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: repeating-conic-gradient(blue, black 0.00306deg);
-webkit-mask-image: radial-gradient(circle, transparent 0% 35%, black 35%);
mask-image: radial-gradient(circle, transparent 0% 35%, black 35%);
}
clip-path: circle(25% at center);
You’ll need to clip a square out by using the polygon function.
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
How does this become a square instead of a circle?
https://jsfiddle.net/a6th8jkv/2/
.curtain:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: blue;
-webkit-mask-image: radial-gradient(circle, transparent 0% 35%, black 35%);
mask-image: radial-gradient(circle, transparent 0% 35%, black 35%);
}
You should use polygone function
Punching a hole through the blue so you can see through the container.
What I was trying to figure out.
I’m on a mobile at the moment so can’t test but you can probably use a mask
mask:
linear-gradient(to top, transparent,#fff) top /100% 20%,
linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
linear-gradient(to left , transparent,#fff) left /20% 100%,
linear-gradient(to right , transparent,#fff) right /20% 100%;
mask-repeat:no-repeat;
Play around with something like that.
If I want to keep the red behind the video, how do I do that?
https://jsfiddle.net/85jfw70c/1/
Maybe I wasn’t supposed to add:
width: 94.96%;
height: 90.91%;
To this:
.container {
max-width: 642px;
margin: 15px auto 30px;
padding: 15px;
position: relative;
/*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
border: 1px solid #0059dd;
border-radius: 0;
background: linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
}
.container::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 94.96%;
height: 90.91%;
background: red;
}
With that code, I added it here: https://jsfiddle.net/0rwv6h95/4/
It didn’t do anything.
I was supposed to be able to see through the container.
.container {
position: relative;
max-width: 642px;
margin: 15px auto 30px;
padding: 15px;
/*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
border: 1px solid #0059dd;
border-radius: 0;
background: linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
}
.container::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 94.96%;
height: 90.91%;
background: transparent;
-webkit-mask-image:
linear-gradient(to top, transparent, #fff) top /100% 20%,
linear-gradient(to bottom, transparent, #fff) bottom/100% 20%,
linear-gradient(to left, transparent, #fff) left /20% 100%,
linear-gradient(to right, transparent, #fff) right /20% 100%;
mask-image:
linear-gradient(to top, transparent, #fff) top /100% 20%,
linear-gradient(to bottom, transparent, #fff) bottom/100% 20%,
linear-gradient(to left, transparent, #fff) left /20% 100%,
linear-gradient(to right, transparent, #fff) right /20% 100%;
mask-repeat: no-repeat;
}
In this fiddle if you add the code I gave you you get this:
I tweaked the css to have hard stops.
.container {
position: relative;
max-width: 642px;
margin: 15px auto 30px;
padding: 15px;
/*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
border: 1px solid #0059dd;
border-radius: 0;
background: linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
mask:
linear-gradient(to top, #fff 20%, transparent 20%),
linear-gradient(to bottom, #fff 20%, transparent 20%),
linear-gradient(to left, #fff 20%, transparent 20%),
linear-gradient(to right, #fff 20%, transparent 20%);
mask-repeat: no-repeat;
}
You added it to the wrong element. It should be .container.
I have no idea what you did.
I don’t see what you are seeing: https://jsfiddle.net/e5yvzLuf/
You had to have done something else in the code.
Why are we seeing two different things?
I can’t keep copying your code into container and getting the same result.
html,
body {
margin: 0;
padding: 0;
}
body {
background: #121212;
padding: 50px 8px;
}
.container {
position: relative;
max-width: 642px;
margin: 15px auto 30px;
padding: 15px;
/*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
border: 1px solid #0059dd;
border-radius: 0;
background: linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
mask:
linear-gradient(to top, #fff 20%, transparent 20%),
linear-gradient(to bottom, #fff 20%, transparent 20%),
linear-gradient(to left, #fff 20%, transparent 20%),
linear-gradient(to right, #fff 20%, transparent 20%);
mask-repeat: no-repeat;
}
.container::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 94.96%;
height: 90.91%;
background: blue;
}
.ratio-keeper {
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
}
.ratio-keeper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
this worked: https://jsfiddle.net/tjnmLvrz/2/
.ratio-keeper {
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
background: blue;
}
replace clip-path: circle(25% at center) with clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%) to create a square.
.curtain:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: repeating-conic-gradient(blue, black 0.00306deg);
-webkit-mask-image: radial-gradient(circle, transparent 0% 35%, black 35%);
mask-image: radial-gradient(circle, transparent 0% 35%, black 35%);
clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
}
In Firefox and Chrome on that fiddle you posted I see the same as the image I posted in post #9.
I have no idea what you are looking at unless its an old browser.
No that will do the opposite of what is needed.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.