Cut out shape (triangle) from div and show background behind [closed] - html

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
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):
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?

Answer 1

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;
}

Answer 2

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.

Answer 3

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.