Creating an inverted border-radius with CSS

Hello guys, I can't realize the variables that Kevin created on YouTube: https://www.youtube.com/watch?v=khjVPkO35F0&t=312s We have access to the copenpen code, but there are variables inserted that represent the css properties which we don't know exactly what they are. Does anyone know? Thanks
Kevin Powell
YouTube
Creating an inverted border-radius with CSS
The other day on Twitter, @FlorinPop pulled me into a conversation, wondering how to create inverted, round corners. Mask-image was probably the easy answer, but after someone in the thread said that making an SVG mask felt like overkill, I had to try and see if I could think of an alternative way! πŸ”— Links βœ… The original tweet: https://twi...
13 Replies
Victor Gonzalez
Victor GonzalezOPβ€’4w ago
Test @Kevin Powell ?
Jochem
Jochemβ€’4w ago
@Victor Gonzalez please don't @ people to draw them into your thread
clevermissfox
clevermissfoxβ€’4w ago
Please remember that the rules you agreed to in order to enter the server include not tagging people that you're not responding to, including KPow. #πŸ“rules perhaps review the rules of the server as well as #how-to-ask-good-questions to adjust your post
Victor Gonzalez
Victor GonzalezOPβ€’4w ago
Ok Jochem, got it
clevermissfox
clevermissfoxβ€’4w ago
Ah didn't mean to double down, didn't see jochum beat me to it
Chris Bolson
Chris Bolsonβ€’4w ago
Kevin is normally pretty good and careful about naming his custom properties. Which are the ones you are unclear on? (link to codepen for reference https://codepen.io/kevinpowell/pen/LYgMQpQ)
Victor Gonzalez
Victor GonzalezOPβ€’4w ago
Hy Chris, I would like no know --_size and corner-coloris. I'm adapting it to my code and I'd like to know exactly. Look:
.house-price::after {
--_size: 19px;
content: "";
position: absolute;
width: 16px;
aspect-ratio: 1;
background-image: radial-gradient(
circle at 100% 100%,
transparent var(--_size),
var(--_corner-color, white) calc(var(--_size) + 1px)
);
rotate: -90deg;
}
.house-price::after {
--_size: 19px;
content: "";
position: absolute;
width: 16px;
aspect-ratio: 1;
background-image: radial-gradient(
circle at 100% 100%,
transparent var(--_size),
var(--_corner-color, white) calc(var(--_size) + 1px)
);
rotate: -90deg;
}
Chris Bolson
Chris Bolsonβ€’4w ago
This pen uses: --_br = "border radius" --_size = "size" (width and height as the corner radius elements are circles) --_corner-color = the color of the background that will be "visible" (ie the same color as the element itself) The --_size is based on the border radius value.
Victor Gonzalez
Victor GonzalezOPβ€’4w ago
witch property would be ---corner-color to be the same effect? I just want to replace it to the exactly properties to have the exactly same effect.
Chris Bolson
Chris Bolsonβ€’4w ago
I'm not sure that I understand the question. The --_corner-color needs to have the same value as the element where it is placed. So, in Kevins code the block with the text has a black background so he has given it a value of "black". If the block has a blue background then it would need to be "blue". .... Ah, he has also used the default value.... maybe this is what you are referring to πŸ€” With custom variables you can define a default value as a second parameter. This will be used if the custom property isn't set.
var(--_corner-color, white);
var(--_corner-color, white);
So here, if "--_corner-color" hasn't been set, it will use the default value of "white".
Victor Gonzalez
Victor GonzalezOPβ€’4w ago
Yes, but I want to set the exact css properties to understand what's going on. Then I'll add custom variables to my project, you know? For example, I don't know if --_size is a property, height, width... I want to replace all to understand
Chris Bolson
Chris Bolsonβ€’4w ago
The best way to understand them is to test them with different values and see what happens. This codepen is really quite simple as it only uses 3 custom properties. I suggest that you fork it to your own CodePen account and play around with the values.
Mannix
Mannixβ€’4w ago
it not a property it a value of a property you can't set css variable as a property
Want results from more Discord servers?
Add your server