How to use pseudo-element ::after or ::before In CSS
To add a border to an element with a clip-path: polygon(); style using pseudo-elements ::after or ::before, you can create an additional pseudo-element with the same clip-path property and then apply the border to it.
Example: In this example, we will see the implementation of the above approach with an example.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Clip-Path polygon Border</title> <style> h1 { color: green; } .custom-shape { width: 200px; height: 200px; position: relative; background-color: black; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); display: flex; align-items: center; justify-content: center; } .custom-shape::after { content: ""; width: 190px; height: 190px; position: absolute; background-color: #3498db; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } </style> </head> <body> <h1>w3wiki</h1> <div class="custom-shape"></div> </body> </html> |
Output:
start shape element
How to add border in the clip-path: polygon() using CSS ?
Adding a border around shapes can substantially improve the visual attractiveness of your website when it comes to web design. Using the clip-path: polygon() Property is one great and inventive approach to accomplish this. This not only allows you to make unusual shapes but also allows you to add a border that fits your design. In this article, we will learn how to create a custom shape and apply a beautiful border using CSS style.
Table of Content
- clip-path: polygon() Property
- Using pseudo-element ::after or ::before
We will explore both approaches for including the Border to the clip-path Property.