Issue
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?
Solution
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>
Answered By - StepUp
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.