您如何仅使用CSS制作这种犬齿状的形状 [英] How do you make this dogeared shape with css only

问题描述

任何人都可以告诉我(并解释一下)如何仅使用CSS和1种形状来创建此图像(50x50px)一个在右下角带有透明"dogear"的正方形?

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.

推荐答案

如何使用渐变?

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

http://jsfiddle.net/dCc7G/

这篇关于您如何仅使用CSS制作这种犬齿状的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！