你怎么用css做这个dogeared形状

Question

任何人都可以告诉我（并解释）如何仅使用CSS创建此图像，并使用1个形状（50x50px）创建一个带透明＆＃34; dogear＆＃34;在右下角？

我一直在玩三角形和带边框的圆圈，但这有额外的一面，我无法自己弄清楚如何建造。感谢。

Answer 1

如何使用渐变色？

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

http://jsfiddle.net/dCc7G/

Answer 2

此解决方案不使用CSS，但它只是您可以考虑使用SVG的替代方法。

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

小提琴here

Answer 3

你可以使用伪元素和框阴影： 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)
}

您可以通过边框绘制三角形或旋转伪元素。

这里有一些示例可以提供想法http://codepen.io/collection/LbCzx//或选定的http://codepen.io/collection/KIkgz//

Answer 4

使用旧式CSS和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;
}

Answer 5

对左上角做类似的事情：

使用以下内容：

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>