CSS Circle and Box With Up Arrow

Design help General
1

I want to add a CSS circle and a box with an up arrow into one of my Divs.

The code for the up arrow is:

.arrow_box {
position: relative;
background: #88b7d5;
}
.arrow_box:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
margin-left: -30px;

Where do I put this in webflow?

Thanks!

2

Drop an embed component into the bottom of the page, and paste the CSS code wrapped with <style></style> tags. This will allow you to preview it in the designer.

Once you are okay with the div, move that code to

Site Settings > Custom Code > Header Code

This will apply the changes site-wide, but will only take effect on published sites and cannot be seen in the designer.

3

Little note: if add this code snippet to the embed code on the page it will be visible in the Designer mode :wink:

1 Like
4

That’s what I said…

5

Sorry @samliew, I missed that :confused:

6

Here is a nice site, where it lists the easy to use css styles which you can recreate in Webflow by adding a class to a div, and then enter the styles shown in the example:

Some of the shapes might need custom css, but still fun :slight_smile:

1 Like
7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.