CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DjangoTango
DjangoTango

Reputation: 67

Slanted div border transparency

So, I know how to make slanted divs using :after and borders for modern layouts.

But, I'm wondering if you can use this to crop out a portion of a div through transparency? For example, lets say I had a row of cards with background images and I wanted the slanted effect on these. but, the slant here is just a transparency layer to where the page (not background image of the cards) would bleed through.

Using border-color: (color) transparent transparent won't work. Nor will the reverse for either slanted direction. Not sure how to go about this or if it's even possible.

.row > div {
  background: url("https://www.google.com/photos/about/static/images/google.svg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 200px;
  }

body{ background: orange;}
    
  .row > div:first-child::after {
  content: "";
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    top: 0;
    border-width: 90px 0 0 100vw;
    border-color: black transparent transparent;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row'>
  <div></div>
</div>

Upvotes: 1

Views: 725

Answers (1)

tao
tao

Reputation: 90208

In short, you can't trim the element's content using border.

The HTML border is a painted surface at the edge of the element and it's pretty limited regarding shape. The only neat trick you can do with border is using images and get the middle section to auto-repeat.
And, of course, you can round borders, using border-radius.

But if you want a non-rectangular you need to use either HTML elements or pseudo-elements.

However, one can trim element contents, using clip-path: 

.row>div {
  background: url(https://www.google.com/photos/about/static/images/google.svg) no-repeat 50% 50% /cover;
  padding-bottom: 33%;
  clip-path: polygon(0 0, 100% 42%, 100% 100%, 0 100%);
}

body {
  background: url(https://picsum.photos/800/600) no-repeat 50% 50% /cover;
  height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid">
  <div class='row'>
    <div></div>
  </div>
</div>

Do note browser support is currently sitting at 88%. If you want more, you're better off cutting your text in the image editor of your choice and saving the result as <svg>.

For more on clipping and masking I recommend these articles:

Upvotes: 2

Related Questions