html - 你如何只用 css 制作这个 dogeared 形状

Question

任何人都可以告诉我(并解释)如何仅使用 CSS 和 1 个形状(50x50 像素)在右下角带有透明“dogear”的正方形来创建此图像吗？

我一直在玩三 Angular 形和带边框的圆圈，但它有额外的边，我无法自己弄清楚如何构建。谢谢。

Answer 1

如何使用渐变？

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

http://jsfiddle.net/dCc7G/