-1

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

lupz
  • 3,620
  • 2
  • 27
  • 43
Diego Manzanares
  • 27
  • 4
  • 2
    How you tried inspecting the buttons to see how it's done? – dantheman Aug 17 '22 at 08:06
  • 1
    Hint: Look for [`clip-path`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path). – Amadan Aug 17 '22 at 08:10
  • @Amadan, I think [`skew`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew) helps – Geeky Quentin Aug 17 '22 at 08:11
  • 1
    @GeekyQuentin `skew` would affect the text as well, unless you specifically counteract it (or overlay a skewed box under a non-skewed text). But also OP specifically asked how to get boxes like in the linked webpage; the linked webpage used `clip-path`. – Amadan Aug 17 '22 at 08:18
  • @Amadan you just have to add an `after` element to the button and skew it there, [look at this](http://www.java2s.com/example/html-css/css-widget/change-button-shape-to-parallelogram.html) – Geeky Quentin Aug 17 '22 at 08:43
  • So far I have tryed @StepUp ´s answer and works, but I´m interesed in adding at least 3 of these boxes one next to each other, separated by some margin between them for having space for the boxes to wide when hovering over them. How can I configure these boxes for them to appear next to each other? I already have the hover effect, but it is the inline position what I´m messing with now. – Diego Manzanares Aug 17 '22 at 09:30
  • @DiegoManzanares, if the current answer has solved your question, consider accepting it and ask your query as a new question, do not ask questions in comments – Geeky Quentin Aug 17 '22 at 09:58

1 Answers1

3

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 class="foo-bar">Some text</div>
StepUp
  • 36,391
  • 15
  • 88
  • 148