How to Create a Slanted Edge Effect With Simple CSS Tricks

0:00:00 What is up my friends?

Welcome back to the channel. Today’s tutorial is actually a user question that was asked in the Bricks community on Facebook.

I want to head over to that thread right here. Chris Chris, which by the way, just saying, I don’t normally help people that have two first names, but in this case, Chris Chris did ask a really good question and it makes for a really good tutorial.

So we’re going to roll with it. We’re going to do it anyway.

Alright, Chris Chris, he wants to know how to make this little cut out card border effect thing. Now I’m going to head over here and show you the example that I’ve created because it’s higher contrast.

It’s easy to see exactly what’s going on. But we have this outline effect with a sharp edge at the top right corner.

And the reason I’m doing this tutorial is because this is a very unintuitive thing to create. It’s not an easy thing unless you’ve seen how it’s done and you understand the concept.

And the other reason, the second reason I’m doing this is because if you look at all the answers, it wasn’t so helpful, wasn’t so helpful. Right.

People are like, I would use a pseudo element. And it’s like, oh, OK, then what now?

What next? Right.

We are going to use a pseudo element, but that answer by itself doesn’t really help anybody. We had this example was given which if you notice uses all solid boxes.

Well when you do this with solid boxes it’s very easy. When you do this with non-solid boxes it’s not so easy.

When you want a border effect it’s not easy at all. So these tutorials right here don’t help anybody.

And then we come down here, I was actually tagged in this thread. Okay, so and then some other people are like, use a clip path, but then they don’t give you all of the information.

See a clip path by itself is not gonna get the job done. There’s a lot to know here.

And it also presents an opportunity to talk about some of the like, tricks of the trade when you’re doing something like this. So you’re gonna get some golden nuggets in this tutorial.

We’re gonna make it nice and quick, but I am going to talk you through it so you understand all the details. I’m not just gonna go bing, bang, boom, show you how it’s done, because I’m not into like giving fish, right?

I teach people how to fish. I don’t just hand them the fish, all right?

If you wanna fast forward, go ahead, be my guest, fast forward, but I’m gonna talk you through this so that you can actually learn. Okay, so what I’m gonna do, I’m gonna tell you right off the bat, you cannot use a border for this.

You cannot use a clip path on the parent for this and then call it a day. You cannot just use a pseudo element.

You actually have to combine a pseudo element with a clip path and it’s, like I said, a little bit unintuitive. So here’s what we’re going to be building.

I am going to add a section below this. And excuse me, my voice is still recovering.

And what I’m going to do is make this background color our base ultra dark color. Okay, so that section has base ultra dark and we’re going to make an exact replica of what you see up here.

This needs to be a three column grid. So I’m going to make a three column grid just like that.

And then I’m going to add a block to this. That block is going to be our card.

We’re going to call this an edge card. Okay, so edge card just like that.

I need to add a heading, text and a link. So I’m gonna add a heading, I’m gonna add text, I’m gonna add a link.

Okay, and then I’m gonna put classes on all of these things. This is gonna be edge card, double underscore heading.

This is gonna be edge card, double underscore text. This is gonna be edge card, double underscore link.

Okay, so I’ve got my BIM classes. If you don’t know what BIM is, you don’t know what I just did, search for BIM on this channel or watch my page building 101 series and get up to speed ASAP.

Okay. So on the edge card parent, which I’m going to name this edge card right here, I’m going to go ahead and say that our typography is going to be white trans 60 and then I’m going to grab that heading.

That heading is going to be white. And then I’m going to put large spacing all up inside this card in my padding area.

We’re gonna choose L, and then I’m extending that to all sides. And then we’re gonna add a gap so that we can gap out our content.

This is gonna be content gap divided by two. And I think we’re pretty good here.

So this is gonna say card heading. And now we’re gonna talk about the actual effect.

How do we create the effect? Remember I said, no borders, no borders.

So what are we going to do? I want you to imagine that there’s two elements.

There’s a back element and a front element. The back element is the color that you want the border to be.

The front element is the same color as the background of the section that you happen to be working in. I will tell you right off the bat, there are some limitations with this style.

Okay? And it’s simply because of the tactics that are required to achieve it.

For example, you’re not going to be able to use background images. Okay?

If you, for this section back here, you can’t use a background image and put these on top and get the same outline effect. All right?

You’re going to need to use a, you can’t really use a gradient. You’re going to need to use a solid color so that you can match it with the solid color inside of the card.

But I’m going to show you right here what the effect looks like without worrying about the sharp edge. And then we’ll talk about how to add the sharp edge.

Okay. So what I’m going to do with edge card, and I’m going to do all of this in the custom CSS box, because I want all of these styles to live together.

I don’t want to have to go hunt down panel by panel where all these things are. I want them all to live in the exact same place so I’m gonna write custom CSS and don’t worry I’m gonna walk you through it to me nice and easy kind of and but again page building 101 if you haven’t watched page building 101 go watch it ASAP get up to speed it’s absolutely free it’s like hours of free content that will take you from beginner to pro okay very very quickly so I’m gonna I’m gonna write root which references my edge card class And I’m gonna say that the background color of my card is gonna be white got me so far That’s actually the border color.

Okay. Remember we’re Simulating a border now.

I need a pseudo element inside of this thing That’s absolutely positioned and knowing that I need to go ahead and just set the position on this card to relative, which is going to catch and contain that absolutely positioned pseudo element. So now I’m going to come down here and I’m going to make this a before pseudo element and I’m going to make the background color of this element the same color as the background color of this section, which was base ultra dark.

Okay. And now you can’t see it yet because what do we know about pseudo elements?

You need to define content, which in this case is going to be blank. All right?

Next thing that we need to do is we need to set an inset. We need to attach this card to our parents and we use the inset.

Now you can use top left, right, bottom, et cetera, but you can also use the shorthand called inset. And in this case, inset is more efficient because we want to attach it to all sides.

And you can say inset of zero just like this. All right.

Now we have a display or actually just position it at this point. So position of absolute.

Right. And look what happened.

We got the base ultra dark on this before element. And because we attached it to all four corners of our card it’s stretching to fill up the entire card and because it’s base ultra dark our card disappeared.

Now here’s how you get the effect instead of attaching it to all four corners what if you attach it one pixel or two pixels in so that it’s not completely taking up the card it’s just taking up almost all the card, right? So instead of zero on this inset, what if I did two pixels?

Look what I get. I’m gonna go save and I’m gonna refresh.

You get an effect. The effect is that we created a white border.

But obviously we didn’t use the border property, did we? We used a pseudo element inside of our main element and it’s only two pixels inside, so it gives the effect of there being a border here, okay?

Now, problem, all of our content is covered up by the pseudo element. So what we need to do with the pseudo element is the index it to minus one to put it in the background.

But then we create another problem. We create another problem.

The problem is that it goes behind the whole card itself. So what we need to do in this case is we need to reset the stacking context of this card element.

I know it’s fancy, it sounds advanced, I explain all this in page building 101, okay. Go watch my pseudo elements training in page building 101.

I’m telling you, do that course and you’ll be good to go. So now you’re going to say isolation of isolate and that’s going to reset the stacking context on this card and it’s going to give us the effect that we want while I’ll still be able being able to see our text and our content and all of that, okay?

So now we’re just left with the challenge of how in the world do we create that little cutout effect? And that is where we in fact use a clip path.

So we’re gonna go CSS clip path generator and we are going to choose, you can choose any shape that gives you enough points, which let’s say bevel, and then you’re actually just going to get rid of some points that you don’t need All right, so we can drag this to that corner drag this to that corner drag this down to this corner and look This is the shape that we want what this is going to do effectively is cut off the top right-hand side of our box Right. So what we’re going to do is grab the code from down here and we’re going to head over and remember We’re going to do some golden nugget stuff here too, okay?

We’re gonna show you how the pros handle this. Now, I’m gonna put the clip path on my before pseudo element and look what happens here.

I’m gonna close Facebook for a minute because that notification is bothering me. Look what happens here.

It cut off our pseudo element in a slant fashion, but it leaves the the parent element behind it. So I can still see the white from the parent element, that’s no good.

I want to cut that off as well. So I’m going to take the exact same clip path and I’m going to drop it onto the parent also.

I’m going to hit save and I’m going to refresh. Don’t leave because we’re not done.

We’re not done. Notice this slant is a little weird, okay?

And in fact, if you have multiple cards, I’m going to duplicate that card, and the content in the card is different, okay? I’m going to show you this.

Let’s refresh here. The slant is actually different on these cards because the cards have different dimensions.

That’s bad. I’m gonna show you why that’s happening.

If we go look, edge card style CSS, look at the clip path uses percentages. Percentage is based on the size of the element.

So on a taller element a percent is going to calculate to a different value than it will on a shorter element. We cannot use percentages here.

So we actually have to hijack the code that we were given and replace it with static values so that our cards don’t have different slants to them based on the height of the card, which is based on the amount of content that is in the card, okay? You following?

If you’re not following, rewind and listen again. It’s that simple.

Okay, so we’re gonna take away 80%. We need to replace this with a static value.

But what are we gonna do here? Check this out.

What if we try like 30 rim, okay? 30 rim works, but let me do 20 rim to exaggerate it.

Okay, 20 rem, 10 rem. All right, let’s do 20 rem here and we gotta do the same thing here, which by the way, we’re gonna fix that up in just a second.

All right, so is that not, yeah, that’s not working. 10 rem and 10 rem, there we go.

See, I’m just guessing, like, these are called magic numbers, like I’m just throwing random numbers in here. We don’t really know what’s going on because we also don’t know how wide the card is going to be.

This number is not going to make sense anymore as the card gets wider. Static value is not going to work here.

What we need is a is we need to take a relative value and then make it static. Okay how do you do that?

You do that with a calc. Alright watch this.

So we’re going to say calc. Remember it was like 80% before.

So we need to say a 100% which is a relative value but then take away a static amount like 5 rim and we’re gonna get a certain effect. Now I’m gonna take that calc right here and I’m gonna put it right here as well and now I’m getting a standardized cut, a standardized angle.

The problem is I have one more percentage to take care of which is this 20%. If I make this 20% match this 5 rim right here then I should be good to go and it’ll be a nice standard cut.

Look at that. Now maybe 5 rim is too much.

So you say maybe minus 2. 5 rim, 2.

5 rim and then you come over here 2. 5 rim, 2.

5 rim and you get a smaller like that, but now the angles are exactly the same regardless of the size of the card. Doesn’t matter how wide the card gets, doesn’t matter how tall the card gets, it’s always going to be a 5 or 2.

5 rim based angle in this case. Okay?

All right, so we’ve done that. Now alarm bells guys should be going off in your head right now.

You have used, you have repeated yourself. Again, go watch page building 101.

D R Y don’t repeat yourself we’ve repeated ourselves so many times okay we’ve got this clip path here we’ve got this clip path here we’ve got a background color here we’ve got a background color here this section background color is the same as the card background color or the inset of the in the card background color too much going on too much going on to have static values floating all over the place. So what does this tell you?

What is the solution to not repeating yourself and to managing all of these styles, which remember the background color actually is the border color because of the effect that we’re trying to create. So that doesn’t even make any sense.

Go three month rule. Remember the three month rule that I always talk about?

You come back to this in three months, you’re not going to know what the hell is going on here let’s be honest let’s be honest you’re gonna have to analyze it again and try to figure it out or or you can take care of the three-month rule you can take care of the dry principle all at once right now with a little foresight just saying hey I should probably create some tokens here so let’s go ahead and tokenize this bad boy so we’re gonna go to root we’re gonna come in and we’re gonna say border color because that makes sense to my brain. I’m looking at what appears to be a border It’s not a real border, but three months from now.

I’m not going to remember that. It’s like a pseudo border I’m just gonna say what is the border color border color is gonna be white okay now We’re gonna say border width right remember the inset thing that we had to do we do this inset thing right here to create the pseudo border Again, I’m not gonna remember three months from now that I had to do that to create the border thickness, I just want to know what the border width is.

And I’m going to say that that’s going to be two pixels. Okay.

Now I’m going to say what is the background color, right? This is the background color of the pseudo element itself.

That’s going to be in this case, base ultra dark, base ultra dark, just like that. Okay.

And then I need the edge. Okay.

I need to know what what is my edge the edge is this polygon right here So I’m just gonna copy and paste that into the edge Variable and now what I’m gonna do is I’m gonna replace all these static values with these Variables these tokens and you’re gonna see how easy this makes your life. Okay, so the background color is actually The border color, right?

I’m stealing it from right there. And then the inset right here is actually the border width, all right?

Just like that. And then the clip path on both of these, which by the way, now I’m gonna be able to change the edge values from one place instead of bouncing back and forth between two places.

So this is gonna be edge. And this polygon right here is just going to be edge.

Now, last thing I need to change is this base ultra dark. We got to get rid of that.

That is going to be our background color. Okay.

So we have fully tokenized this. Now check this out.

I can come in here and just say, Hey, border color again at three months from now, I’m not gonna remember this is not a real border. So it’s like a pseudo border situation.

And this is actually the background color, the main element, no, no, no, no. I just changed border color.

And by the way, anybody on my team can come along and they can look at these variables and see the exact same thing. The variables, the tokens, transition all of this into like plain, intuitive English, okay?

So my border color, let’s say I want that to be red, look what happens. Border width, I want that to be like five, look what happens.

Background color, let’s go with just base, look what happens, okay? So we’re able to change this stuff on the fly.

Now, oh, I can also change, check this out, the angle, right? The edge, look at that, I just have it, now I have a new edge.

2. 5, let’s go back to 2.

5. I mean, look how easy this is.

So let’s put this back at ultra dark, two pixels and white, okay? Save.

Now, let’s view this on the front end. There we go right there.

You might be wondering, Kevin, what if I use this on a different colored background? So instead of base ultra dark, what we have is maybe primary medium, something crazy.

Okay, so I hit save. We go to the front end.

Clearly that’s not the effect that we want. Okay, well, we can’t change these variables on this class level.

We can’t do that because that’s going to change everywhere we’ve used this card and we only want to make the change when the background color is primary medium. So this is a perfect use case for a modifier class and I want you to see how locally scoped variables pair with modifiers like chef’s freaking kiss.

Okay check this out so I’m going to create a modifier edge card double dash primary medium Okay, edge card primary medium lets me know we’re changing the properties of the edge card to match Primary medium. So what we’re going to do is we’re going to steal the variables.

I actually don’t need the edge variable I just need the other variables and I’m going to paste them on that class primary medium, and then I’m just gonna change the variables. Look at this.

I’m gonna go change this to primary medium, and it’s gonna change right there. And if I wanted the outline to still be white, that’s really all I have to change, okay?

And in fact, in that case, I can just get rid of the other two variables. I’m only needing the one that I need to change, and then I can come over here and say edge card primary medium, and it’s gonna change to match that as well.

It’s that simple. And then you can always override an individual one on its own by stealing that same variable, turning off all classes, and then putting that variable back at the ID level.

And this could be like primary dark or something like that. And you can change a single instance of the card simply by changing that locally scoped variable.

These are the tricks of the trade my friend. These are the tricks of the trade.

The difference between beginners and professionals or amateurs and professionals and you’re getting it all here. You’re getting it all here which means you need to like the video.

You need to like this video right now. Drop a comment below.

If you have any questions, anything I didn’t cover, any use cases where you’re like, I don’t know how it would work in this situation, drop those comments below and I will do a follow-up video if I need to. But I wanted to make this short and simple and sweet and show you guys how to accomplish this.

I’m out. Love you guys.

Peace.