Clip path is great but there is an issue. The border property stops working. Triangles, polygons, and nearly any shape can easily be produced. However, the borders are cut.
This short article examines how to resolve this problem with pseudo images, introducing before and after.
Problem
CSS renders the clip path last no matter how it is placed in a CSS class or in what order classes are arranged. This means that margins, borders, and other features are lost when the object is clipped.
Before and After
The solution to the issue is to use CSS to superimpose one div element on another through the use of a pseudo image. Pseudo images can be created using :before or using a standard class followed by :after.
Before and after render content as expected:
.small-tab-bl:before{ content: ''; width: 378px; height: 178px; display: block; position: absolute; background: #f9fafc; top: 1px; left: 1px; clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 7.5% 100%, 0% 87%); -webkit-clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 7.5% 100%, 0% 87%) -moz-clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 7.5% 100%, 0% 87%) z-index: 1; } .small-tab{ position: absolute; width: 380px; height: 180px; background: grey; clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 7.5% 100%, 0% 87%); -webkit-clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 7.5% 100%, 0% 87%) -moz-clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 7.5% 100%, 0% 87%) z-index: -1; }
This class clips a div element to create a tab missing the bottom right corner. Two tabs are generated, one positions a single pixel off of the other to create a border. Before must include the gradient and content should be provided.
Conclusion
Before and after are useful tools for placing content and alleviating the problems with clip path.
Nice tutorial. You explained something which I thought almost impossible in CSS
:before and :after work in most browsers. There may be an issue with IE and Edge but their market share is becoming inconsequential.