You can make a line on both sides of the title with 2 pseudo elements and borders: This works over a transparent background (lines and title have transparent backgrounds). The line length will adapt to the title width so they alway start and end at the same position regardless to title length. The title can … Read more
Another idea using mask and CSS variables to have better control over the whole shape. It’s reponsive, transparent and allow any kind of background: .box { –all:0px; width:200px; height:150px; display:inline-block; margin:10px; background:red; -webkit-mask: linear-gradient( 45deg, transparent 0 var(–bottom-left,var(–all)) ,#fff 0) bottom left, linear-gradient( -45deg, transparent 0 var(–bottom-right,var(–all)),#fff 0) bottom right, linear-gradient( 135deg, transparent 0 var(–top-left,var(–all)) … Read more
In order to achieve this, you should consider altering your markup in order to make your html more efficient. This can be achieved using a pseudo element. I’ll address each point individually, and put it all together at the end of my answer. First of all, Use pseudo elements to avoid extra elements You could … Read more
There are many ways to create the shape with a slanted edge only on one side. The following methods cannot support dynamic sizes as already mentioned in the question: Border triangle method with pixel values for border-width. Linear gradients with the angle syntax (like 45deg, 30deg etc). The methods that can support dynamic sizes are … Read more
CSS Triangles: A Tragedy in Five Acts As alex said, borders of equal width butt up against each other at 45 degree angles: When you have no top border, it looks like this: Then you give it a width of 0… …and a height of 0… …and finally, you make the two side borders transparent: … Read more