How do you make this dogeared shape with css only

Question

Can anyone show me (and explain) how to create this image with CSS only and with 1 shape (50x50px)a square with a transparent "dogear" on the bottom right?

I've been playing with triangles and circles with borders, but this has extra sides which I can't figure out on my own how to build. Thanks.

Answer 1

How about using gradients?

div{
  width: 50px;
  height: 50px;    
  background:
   linear-gradient(135deg, #333 0%, #333 90%, transparent 90%, transparent 100%);
}

http://jsfiddle.net/dCc7G/

Answer 2

This solution does not use CSS, but its just an alternate approach that you could consider too using SVGs.

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
 <g>
    <polygon id="mypol" points="0 0 50 0 50 25 25 50 0 50" fill="red"></polygon> 
  </g>
</svg>

Fiddle here

Answer 3

you can use pseudo element and box shadow : http://codepen.io/gc-nomade/pen/BlLFm/

div {
  position:relative;
  overflow:hidden;
  width:200px;
  height:200px;
  margin:auto;
}
div:after {
  content:'';
  position:absolute;
  border: #BDB479 solid 30px;
  border-bottom-color: transparent;
  border-right-color:  transparent;
  bottom:0;
  right:0;
  box-shadow:0 0 0 500px #BDB479;
}
body {
  background:linear-gradient(to top, gray,yellow)
}

you can draw the triangle shape via borders or rotate the pseudo-element.

here some more examples to give ideas http://codepen.io/collection/LbCzx// or selected http://codepen.io/collection/KIkgz//

Answer 4

To do something similar with a dogeared upper left corner:

Use the following:

CSS:

.status-caution {
  text-align: center;
  background-color: #ffff99;
}

.status-good {
  text-align: center;
  background-color: #ccffcc;
}

.status-dogear {
  background: linear-gradient(135deg, #333 0%, #333 10%, transparent 10%, transparent 100%);
}

HTML:

<table>
  <td class="status-caution status-dogear"> 5 </td>
  <td class="status-good"> 0 </td> <!-- for comparison without dogear -->
</table>

Answer 5

With old school CSS and HTML:

jsFiddle example

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div class="corner"></div>

.corner {
    float:left;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 50px 50px 0 0;
    border-color: #cccc99 transparent transparent transparent;
}
#a {
    background: #cccc99;
    width:200px;
    height:200px;
    float:left;
}
#b {
    float:left;
    width:50px;
    height:200px;
    background: #cccc99;
}
#c {
    clear:both;
    float:left;
    background: #cccc99;
    width:200px;
    height:50px;
}
body {
    background: #eee;
}