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.

Author: Webmaster, Admin at WpScriptly

Hey, I’m Scot, the guy behind WpScriptly. I create simple, no-fluff WordPress plugins and tools to make your site easier to manage and more powerful. Everything I build is tested on my own projects first — if it’s here, it’s because it works. Thanks for checking out the site. Hope you find something useful at Wp Scriptly.

Recent stories by Webmaster:

1. The Importance of Active Members in Coalition WP Community - Blog
2. Simple Raffle Plugin for WordPress – Auto Generate Codes, Export Data, GDPR Compliance - Plugin
3. Plugin List Exporter for WordPress - Plugin
4. FluentCRM Campaign Dashboard Plugin: Simplify Your Email Campaign Management - Plugin

*These scripts and plugins are provided as is with no guarantees or warranties. If you need assistance or run into issues, feel free to reach out via the contact page.