Streaming live at 10am (PST)

Transparent down "arrow"?

How would I do the section arrows like this?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Only by custom code (“basic” By CSS pseudo elements ::after and ::before selectors - advanced by clipPath).

See her an example:

If you do not know how to implement this on webflow - please update.

or just create a transparent image with this part and place it in top section as position: absolute, bottom:

Hi
In case that you don’t know how to implement this on webflow, copy the code below and paste it into embed code element:

<html>
<style>
.wrap {
  position: relative;
  height:100%;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: 100%;
  display: block;
}
.arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom:3%;
  background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before, .arrow:after {
  content:'';
  position: absolute;
  bottom: 100%;
  width: 50%;
  padding-bottom:inherit;
  background-color: inherit;
}
.arrow:before {
  right: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}
.arrow:after {
  left: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}
</style>
<div class="wrap">
    <img src="replace this with your image link.jpg" />
    <div class="arrow"></div>
</div>
</html>

Dont forget to replace the image link

I tried adding custom code, but I didn’t get all the way there :slight_smile:

Thanks for all the help!

https://preview.webflow.com/preview/hjartgrupen-dev?utm_source=hjartgrupen-dev&preview=375bf7b02584c1cd8a95f0d1a0c8b547

Hi

First Make sure you copied all the code (you missed the on the start and end). the image should place by the attach code, make sure to copy the link of the image (https://uploads-ssl.webflow.com/5c96b859de174362cf1a926c/5c988923d78421226594dbef_hero-12.jpg) and paste it in the code (where i wrote to you: “replace this with your image link.jpg”.

Hope it helps, if not - we are here :blush:

I don’t like that solution, because then I have to add all the content of the section in the embed element. I would just like to add a embed element inside of the section which positions itself at the bottom and adds the arrow thingy.

I managed to do it in webflow. Did two white blocks, skewed and moved them to create an arrow shape. Not sure if it will display the same for all screen sizes though.

Can you tell where to look to see your result? Just curious

I cant wait to see your solution. interesting

The arrow is there now!

1 Like