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.