irregular shape background - css - css

Question

I am using this tutorial to make a Triangle Top Left like so:
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
output:
but how can I make an irregular shape similar to this but cut out a corner on the bottom right?
ex:
the html is straight forward : <div id='triangle-topleft'><div>

Answer 1

You can use a gradient to fill up background with a transparent part.
.Ttrgle {
display:inline-block; /* or whatever or absolute position that allows to size it */
width:100px;
height:100px;
background:linear-gradient(to top left, transparent 33%, red 33%);
}
html {
background:linear-gradient(45deg, gray,white,blue,purple,yellow,green,lime,pink,turquoise)
}
<span class="Ttrgle"></span>

Answer 2

You could use a linear gradient
body {
background: #bada55;
}
div {
width: 200px;
height: 200px;
background-image: linear-gradient(to bottom right, red, red 60%, transparent 60%);
}
<div></div>

Answer 3

You can use a rotated pseudo element. The approach is similar to the one described here but the transform origin is changed to 15% 100% :
DEMO
div{
position:relative;
width:100px;height:100px;
overflow:hidden;
}
div:before{
content:'';
position:absolute;
left:0; bottom:0;
width:200%; height:200%;
transform-origin: 15% 100%;
transform:rotate(-45deg);
background:red;
}
/* FOR THE DEMO */
body{background:url('http://lorempixel.com/output/people-q-c-640-480-8.jpg');background-size:cover;}
<div></div>
Transforms are supported by IE9 and over.
Note that I didn't include the vendor prefixes in the snippet. They are included in the fiddle demo.

Answer 4

You can wrote something like this:
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
position:absolute;top:0;left:0;
}
.outer-div {position:relative;width:80px;height:80px;overflow:hidden;}
<div class="outer-div">
<div id="triangle-topleft"></div>
</div>

Answer 5

Wrap the div in another div that is slightly smaller and overflow: hidden
#triangle-topleft {
border-top: 120px solid red;
border-right: 120px solid transparent;
position:absolute;
left:0px;
top:0px;
}
#container {
position:absolute;
width: 90px;
height: 90px;
overflow:hidden;
}
<div id='container'>
<div id='triangle-topleft'></div>
</div>