Docs

[Tristan A]

Hi there!

Please see this thread: https://community.theme.co/forums/topic/adding-an-upside-down-triangle-in-the-content-band-border/

I am trying to achieve something similar, but this time the arrow / triangle should be an extension of the image above it, as opposed to being white?

Thanks!

[Tristan A]

This reply has been marked as private.

[Lely]

Hello Tristan,

Look for this custom CSS:

.the-stacks-transparent:before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -25px;
    border-width: 25px;
    border-style: solid;
    border-color: rgba(255,255,255,1) transparent transparent;
}

Update this part:
border-color: rgba(255,255,255,1) transparent transparent;
To this:
border-color: rgba(0,0,0,1) transparent transparent;

The result should be something like attached. Is that what you need?

[Tristan A]

LoL,

In this case that works perfectly 😉 because the bottom area of the image is black. So I will definitely use that here, thanks!

But is there a way to make this work globally, i.e. literally make the triangle look like a transparent expansion of the image above it?

I would imagine that it would involve making the triangle transparent, and moving the section beneath it up and behind the section with the image using something like a negative top-margin and a negative z-index, but i wasn’t able to make this work.

[Joao]

Hey there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts