I’ve been noticing a recent trend in web design that includes irregular shapes in and around box elements on the page to spruce up the design. Avada does something similar with this CSS triangle trick and it really adds just a little bit extra oomph to the page.
For one of my recent projects I’d decided to replicate this using the following code.
The code is well commented so you understand how everything works. Feel free to experiment with the colors and pixel size of the borders.
The secret here is using a transparent border-left and a transparent border-right and then styling the top border to match the background color on the :after selector. This creates a “notch” effect that helps direct readers eyes toward the content in the div.
Replace “div” with what ever class or ID you are trying to target. In the example below I’ve created the class .triangle-demo and I am targeting the :after selector on the element. By adjusting the top or using a bottom property you can move the triangle to your desired position. Use border-bottom instead of border-top to create an outward triangular notch similar to the effect used on Avada.
Can you think of any other cool uses of the CSS triangle/notch effect? Comment below.