2

I've been trying to add a triangle cutout to my website. I've created a triangle in CSS for now however I want this to be a 'mask' and show the pattern background. Here's my current design.

enter image description here

I've tried lots of different ways, such as an inline SVG that cuts out that portion of the div, however they don't seem to scale correctly. When the screen reduces in size I want the right triangle to move along with the box rather than scale in size, like here: current design with reduced browser width.

enter image description here

I've also tried using a :before and :after element with no overflow to get the effect, however I was unable to create 2 triangles (top right and bottom left).

There's probably a really easy way to do this that I'm missing... Any help would be much appreciated!

Nemus
  • 3,879
  • 12
  • 38
  • 57
NaiveCoder
  • 31
  • 3

1 Answers1

2

This should do: 

.masked {
  -webkit-clip-path: polygon(0 100%, 0 0, calc(100% - 240px) 0, calc(100% - 160px) 90px, calc(100% - 80px) 0, 100% 0, 100% 100%, 240px 100%, 160px calc(100% - 90px), 80px 100%);
  clip-path:polygon(0 100%, 0 0, calc(100% - 240px) 0, calc(100% - 160px) 90px, calc(100% - 80px) 0, 100% 0, 100% 100%, 240px 100%, 160px calc(100% - 90px), 80px 100%);      
  min-height: 80vh;
  margin-top: 10vh;
  background-color: rgba(255,255,255,.84);
}

body {
  background: url(https://source.unsplash.com/random/800x600) no-repeat 50% 50% /cover;
}
<div class="masked"></div>

To make it easier to change, I defined some variables controlling the position of the points in SCSS. SO doesn't have SCSS implementation yet, but you can play with it in jsFiddle.
If you change values of $p1, $p2x, $p2y and $p3 and hit Run you'll see the changes.
To get the CSS, you'll need to right-click => inspect and get the code applying from inspector.

tao
  • 82,996
  • 16
  • 114
  • 150
  • This is an amazing solution. It's exactly what I was after and super useful that I can integrate it with the SCSS I'm using. Thanks a lot! – NaiveCoder Nov 09 '17 at 21:02
  • Also out of curiosity, how are the 2 triangles made using this method? By this I mean, how is one triangle created, and then how is this duplicated to show 2? – NaiveCoder Nov 09 '17 at 21:28
  • It's a poligon. You specify each point giving (`x` and `y`) for it. I personally use [`clippy`](https://bennettfeely.com/clippy/) to get any shape started and than just modify the points according to my needs. In your case, I used `px` and `calc()` because I wanted the triangles to not scale. If I used `%`, they would have scaled. – tao Nov 09 '17 at 21:31