Box shadow on angled div using custom code

Design help Custom code
1

Hey, everyone. Hope you’re all doing well.

I’m hoping someone can help me figure out the last piece of the puzzle.

I used an embed element as a section (.section.bgcolor), so I could use clip-path to give it an angled bottom edge. That worked.

Now I’m trying to add a box shadow to that angled edge. Someone much smarter than me gave me this code to use, and although I saw it work for him, it isn’t working when I do it.

Can someone please tell me how to apply the box-shadow to the angled edge at the bottom of .section.bgcolor?

I get the feeling I am making a simple mistake which is preventing it from working, but I can’t see it.

Thank you so much!

Here is my site Read-Only: [LINK][1]

2

Hi @Cdlarsen73 your code as it is now will never work. Here is example how is should be done

First remove all classes you have on your embed and after paste this code into it.

<style>
.bgcolor-wrap {
  filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
  height:100%;
}

.bgcolor {
  background: linear-gradient(135deg, rgba(1,190,255,1) 0%, rgba(99,103,247,1) 100%);
	clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
  height:100%;
}
</style>

<section class="bgcolor-wrap">
  <section class="bgcolor">

  </section>
</section>

Once this code is in embed set height of your divider let say 200px to see result.

CleanShot 2022-08-09 at 18.17.25
CleanShot 2022-08-09 at 18.17.251834×1217 137 KB

3

Hey, Stan. Thank you so much for that. If you wouldn’t mind, I have a couple of followups:

1 - What do you mean by “divider?” I didn’t see a

anywhere in your code, and I don’t know what you mean. If you’re talking about the embed element itself, the box shadow cuts into two when I do that. Can you please clarify for someone who has read a book about html/css but doesn’t have a workable knowledge of it yet? There is no box shadow yet.

2 - Are we not allowed to give embed elements a class? Is this bad practice?

3 - Am I able to assign a section tag or ID to this embed element?

If you were going for this effect, is this how you would do it, or am I better off using a bg image some other means?

I can’t thank you enough, Stan. I’m sure with clarification about the “divider” comment I’ll be able to move on from this. I’ve been trying to figure this out for a week. Hopefully, I can help someone like this one day when I know more. You’re awesome!

-Christian

4

hi @Cdlarsen73 instead explaining everything in written form I have make a short video how to and why. :slight_smile:

hope that will solve your request

5

Hey, Stan. Great video. Thank you so much for taking the time to teach me that stuff.

I’ve been so obsessed with just getting a box-shadow to follow a clip-path that I forgot to tell you WHY I’m doing this. The page I’m building is going to have a few sections that have a regular white bg and a few sections (with written and image content) with this blue gradient bg with this angled bottom.

After doing what you said, and finally making it work, I just now learned that I can’t put any other elements (headers. paragraphs, images, etc.) inside it. I guess embed elements in webflow can’t have any children.

I wonder if I can use the custom code in page settings and apply it to the class I assign to the sections with the blue, angled bg. If I find the solution, I’ll post it here in case anyone else ever has this same question. If you know the solution to this I would love to hear it. If I can do that, it will take care of the height issue, b/c I typically rely on top/bottom padding for sections, so that they respond to the content.

I am so sorry for forgetting to mention that I need this to function like a section. I’ve been focused on this one thing so much that I did a bad job at explaining myself.

I can’t thank you enough for your help. I would be so grateful if you knew how to build an actual section like this, but I’ll understand if you’re done with this issue. You’ve already put in so much time.

Either way, thank you very much for everything.

-Christian

6

Hey, Stan. I had an alternative idea and tried something out that seems to work pretty well. I created the angle in Illustrator and made it a png (worked better than sag in this case b/c of the gradient). If I just overlay it at the bottom of the blue bg it looks like what I’m going for.

I know it’s not done in code, which disappoints me, but it’s a tactic I’ve seen people way better than me use, so I thought I’d try it.

I’m attaching it in case you or anyone else wants to see what I’m talking about.

If you do know how to make a section like we discussed I’d love to hear it b/c I really want to do as much with code as possible, but absolutely no pressure.

Thanks again, dude.

-Christian

angle
angle2000×234 12.1 KB

7

hi @Cdlarsen73 I would not recommend to use any pixel base image element as it get pixelated because of zoom and/or resolution. If you would like to use any shape element you should use SVG instead. In video below I demonstrate 3 different approaches to create identical effect and each approach can be used in different situation. I didn’t include SVG.

Hope that will help to solve your issue.

8

Hey, Stan. The video isn’t working. I can see the read only file, and it looks great, but the video won’t play.

9

Hi @Cdlarsen73 it worked before so there is still issue with video links on this forum. here is DOWNLOAD link instead.

10

Awesome, thank you.

First, using an embed element at the top of the page for all custom css is genius. I guess it works the same as adding code in page settings, but you don’t have to constantly open the settings. That’s a cool idea. I wonder if this way of adding custom code will complicate things in the event of exporting code (for Shopify, etc.).

Second, I originally exported an svg from Illustrator but it looked very pixelated when I brought it in. I don’t know why - perhaps I did something wrong. But I agree svg is better than png here. I’ll try to figure out what I did wrong.

Of your three examples, I think shape-3 was the most elegant. I hadn’t thought of using a full sized div (with the clip-path and box-shadow code inside) inside of a section. That allows me to use the section tag while letting me do the while thing in code. Since I’ll be using padding anyway, no content will cut off.

You spent a lot of time helping me. I can’t thank you enough. You’re awesome. I hope I can help someone the same way some day when I get better.

Thank you!

-Christian

11

Hi @Cdlarsen73 I have used custom code on page as it save time to be able see immediate results but after when all works as expected I usually move code into page or site settings.

I’m glad to see you have find these examples helpful and if you do not have further question related to your request feel free to close your request as solved. :wink:

Thank you for such kind words and have a great day.

12

Thanks for the clarification about the custom code.

Thanks for everything!

-Christian

13

How do I close the request as solved? I can’t find anything that says that.

Thanks.

14

HI @Cdlarsen73 glad to see that you have found how close request and marked your response as issue solution. :+1: