How to add a triangle below the post image with in Kadence themes

Enhancing the visual appeal of your post images within the Kadence theme is simple with a subtle yet effective addition: a triangle beneath the image. Leveraging custom CSS, you can craft this element effortlessly. Begin by identifying the CSS class or ID of your post image container. Then, employ the ::after pseudo-element to fashion the triangle shape below the image. Tailor its size, position, and style using properties like border, border-color, border-width, and transform. Finally, integrate this CSS code into your theme’s custom CSS area or via a custom CSS plugin to ensure seamless implementation and preservation during theme updates.

I use fluent snippet plugin for all my functions, js, and CSS:

I wanted to place a small triangle about 34px to the left on the bottom of the image. See example and demo link below.

This is the CSS I used to create and place the triangle. To change the color to match your website replace the border-bottom color code.

.wp-site-blocks .post-thumbnail :after {
    content: "";
    border-bottom: 16px solid #f7f7f7;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    position: absolute;
    top: 95%;
    left: 34px;
}

 You might have to play with the positioning of the triangle to fit your needs: top:95% – less will bring it up, more will bring it down.

Notes:

“These scripts, CSS styles, and plugins are designed to work best with minimal interference from themes or other plugins. If conflicts arise, adjustments may be needed.
Please note that they must be used as is.”

Let me know if you’d like any further refinements!

Wp Scriptly