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:

This basic script, CSS style, and plugin are designed to function optimally assuming minimal interference from your theme or other plugins. If conflicts occur or further customization is needed, additional adjustments may be necessary. Please note that this script, CSS style, or plugin must be used AS IS.

Wp Scriptly