How can I create diagonal boxes-CodePudding

I´m developing an space for my webpage where I want some diagonal shaped boxes, like the ones on https://mkbhd.com/ where he inserted the studio channel link, podcast, etc. How can I develop something like this?

enter image description here

CodePudding user response：

As mdn says:

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

So let's use clip-path property:

.foo-bar {  
  width: 8rem;
  font-size: 12px;  
  background: lightgreen;
  color: #ffffff;
  padding: 7px;  
  text-align: center;
  clip-path: polygon(15% 0%, 100% 0, 85% 100%, 0% 100%);
}

 <div >Some text</div>