User:Muchos/Snippets/Infobox with slanted top corners

How to make an infobox with slanted top corners

How i want it looks
/¯¯¯¯¯¯\

The idea
We can simulate a trapezoid shape with CSS, by adding transparent top corners to a colored square shape. We will use the same technique but top corners will get the article background color while the rest of the shape will be transparent.

The code
The following CSS is based on a 270 pixels width infobox (standard width on Fandom). It can be customized.

The little extra
I might want to remove the infobox border in order to get a perfect shape. So i add this to my CSS: