CODEWITHSUNDEEP
cssbordertransparencymask
Dynomite
Dynomite

Reputation: 176

CSS > Triangle corner transparent mask

Okay there is a little tricky question. I already know and frequently use CSS triangle to achieve different layouts but this time the triangle should act a bit like a mask. It must have transparent half and it absolutely need to mask the parent background color.

There is a picture of what I wan't to achieve on different level. My designer used this almost everywhere and I need to find a reliable, yet flexible way to do it. (click to see screenshot) transparent triangle

There is how I would traditionnaly do it

.box{
  position:relative;display:block;
  width:280px;height:140px;
  background-color:#000;
  padding:15px 15px;
}

.box.angled:after{
  border-color:#000000 #ffffff transparent transparent;
  border-width:50px 50px 0 0;
  border-style:solid;
  
  position:absolute;display:block;
  width:0;height:0;
  right:0;bottom:0;
  content:' ';
}
<div class="box angled">
  blah blah blah
</div>

Yay, working right? Well, no. Change white border color to transparent and now you only see its parent black background-color.

Now, I know there is probably a way with a mask but most of the time it isn't very well compatible even on a modern firefox 42+ or internet explorer 10.

So as I said, is there any flexible and reliable way to do it in many different situation (flat background, image background, variable parent width / height...)

2016-07-13 EDIT : found a solution if someone has the same question, view my answer below.

Upvotes: 0

Views: 1493

Answers (1)

Dynomite
Dynomite

Reputation: 176

So here is how I worked around my problem. I have been able to find a correct solution for cases requiring a transparent border and I can still use the basic solution for any other situation requiring only a flat color, which is fine with me.

So I fell on this demo while searching for a solution.

div {
  width: 20%;
  min-width: 13em;
  margin: 1em auto;
}
p {
  font-family: helvetica;
  font-size: 2em;
  font-weight: bold;
}

.post-it-note {
   padding: 2em;
   background: #ffd707;
   position: relative;
   min-height: 10em;
}
.post-it-note:after {
   content: "";
   position: absolute;
   bottom: -2em;
   left: 0;
   right: 2em;
   border-width: 1em;
   border-style: solid;
   border-color: #ffd707;
}
.post-it-note:before {
   content: "";
   position: absolute;
   bottom: -2em;
   right: 0;
   border-width: 2em 2em 0 0;
   border-style: solid;
   border-color: #d3b100 transparent transparent;
}
<div class="post-it-note">
  <p>This folded corner works on any colored background!</p>
</div>
https://codepen.io/jontroutman/pen/ihkvL/

the demo is self explanatory but let me explain it. CSS Border does not support percentage but you can somewhat get over this problem with em units and absolute positionning. You need the pseudo-element :after to expand from left to right and the :before pseudo element act here as the arrow. Both pseudo-element are overflowing from their parent box which is important for the 'transparency' to work.

Upvotes: 1

Related Questions