Cut out shape (triangle) from div and show background behind

Question

I am trying to cut a triangle out of a div and show the background as it is behind the div... I would not have thought this to be possible, but you SO pros continue to surprise me here so I thought it was worth a shot :-)

This is what I would like to achieve (sorry for the faint image):

Triangle cut out

_{Please do not answer this question with a 3 column solution or something similar, I am more than capable of achieving this that way... I simply want to know if there are any cool CSS tricks out there that can achieve this with as a few graphics, if not no graphics, as possible?}

See the question [How does this CSS triangle shape work?](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) The idea is to use an element with height and width set to 0, and then use borders to create the shape. See the code example in that question. — Sebastian Wahl, Apr 05 '13 at 08:05
I am not trying to create a triangle! I am trying to cut a triangle out of a div! — Ben Carey, Apr 05 '13 at 08:06
If the question is a duplicate please flag the original question accordingly. An answer should be self contained. — tune2fs, Apr 05 '13 at 08:26

score 2 · Answer 1 · answered Apr 05 '13 at 09:50

It is possible to fake it, with some fantasy and some little tricks:

Use border-radius to cut out a transparent corner of the div;
Use ::before (or ::after) pseudo element to create a big triangle of the same background-color of the div;
Use z-index to put the triangle over the background div but under the content of the div;
Use a transparent container with the same size of your div to contain it, and apply overflow: hidden to cut the exceeding parts of the triangle;

et voilà!

Demo: http://jsfiddle.net/e2Umv/

And no, I didn't know it was possible, I just love challenges and tricky questions :)

HTML

<div class="someText" >
    this text is partially visible;<br/>
    this text is partially visible;<br/>
    this text is partially visible;<br/>
    this text is partially visible;<br/>
    this text is partially visible;<br/>
</div>
<div class="underneathContainer">    
    <div class="cutout">Hello cut out div</div>
</div>

CSS

.someText{    
    background: green;
    position: absolute;
    z-index: 0;    
    top: 0;
}


.underneathContainer{
    margin: 20px;
    width: 260px;
    height: 260px;
    background: rgba(0,0,0,0);    
    overflow: hidden;
}

.cutout{    
    width: 200px;
    height: 200px;    
    background: silver;
    padding: 30px;    
    position: relative;
    z-index: 1;
    border-top-left-radius:30%;    
}
.cutout:before{    
    content: '';
    position: absolute;
    top: -44px;
    left: -30px;
    border-width: 60px 60px 60px 60px;
    border-style: solid;
    border-color: rgba(0,0,0,0) silver silver rgba(0,0,0,0);
    z-index: -1;
}

+1 for your effort! Thank you, but are you able to do this with a triangle in the center like in my image? — Ben Carey, Apr 05 '13 at 10:09

score 1 · Answer 2 · answered Apr 05 '13 at 08:11

1

The only thing I can think of that applies here would be the image mask. You'd probably have to lay an element on top of another to have content over the mask.

The support for image-masks is not ubiquitous (only webkit at present I believe) but that will probably change over time.

answered Apr 05 '13 at 08:11

Ian Wood

6,515
5
34
73

Thank you for your answer, unfortunately it is not the solution I am looking for. I guess it doesnt exist, although that doesnt surprise me... Thanks anyway – Ben Carey Apr 05 '13 at 08:46

Dan Ovidiu Boncut · Accepted Answer · 2013-04-05T09:59:40.163

You could seperate your triangle from the rectangle and go with something like this:

<div id="rectangle"><div id="mask"></div></div>



#rectangle{width:300px; height:120px; position:relative; margin-top:100px; background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}

#rectangle:after{content:" "; position:absolute; width:0px; height:0px; top:0; left:100px;border:1px solid white; border-color:transparent white transparent white; border-width:0px 50px 50px 50px;}

#mask{position:absolute; left:0; width:100px; height:50px; background:white;}
#mask:after{position:absolute; content:" "; left:200px; width:100px; background:white; height:50px; }

Fiddle here.

I am afraid this is not what I am looking for as it just creates a triangle with the same background as the one behind... I need the triangle to be transparent so that the background shows through no matter what it is. For instance, if the background behind was a gradient (which it is) then this gradient would continue through the triangle... Thanks anyway — Ben Carey, Apr 05 '13 at 09:47
This looks great, need to test it thoroughly before I accept though... Is it browser compatible? Thanks so much +1 — Ben Carey, Apr 05 '13 at 10:15
Just to make this a little more complicated... Is it possible to change the borders of the triangle from colours to images? The background of the center rectangle is also a gradient so the borders must be images... — Ben Carey, Apr 05 '13 at 10:19
The only way that i could think to add a border image to that triangle would be by placing a squre div with desired border behind your triangle and rotate it by 45deg. — Dan Ovidiu Boncut, Apr 05 '13 at 11:00

Cut out shape (triangle) from div and show background behind

3 Answers3

Linked