您如何仅使用 css 制作这种带齿的形状答案

【问题标题】：How do you make this dogeared shape with css only您如何仅使用 css 制作这种带齿的形状
【发布时间】：2014-04-29 10:07:33
【问题描述】：

谁能告诉我（并解释）如何仅使用 CSS 和 1 个形状（50x50px）右下角带有透明“dogear”的正方形创建此图像？

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

【问题讨论】：

角一定要透明吗？
是的，先生，底角就像需要透明的狗耳朵样式。谢谢
这可以帮助css-tricks.com/examples/ShapesOfCSS
找到这个，看起来像你需要的。 jsfiddle.net/kdFdt/8
是的，我已经花了几个小时来处理那里的形状。但这种形状有额外的侧面。

标签： html css shapes css-shapes

【解决方案1】：

你可以使用伪元素和盒子阴影： 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//

【讨论】：

这是在 p 标签中覆盖我的文本吗？我有什么问题吗？
我可以看看你的问题吗？

【解决方案2】：

使用渐变怎么样？

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

http://jsfiddle.net/dCc7G/

【讨论】：

这是关于这个形状的 CSS 的最佳答案，它很快让我可以用最少的代码在元素内部使用文本。谢谢！

【解决方案3】：

此解决方案不使用 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

【讨论】：

这太棒了！不确定我是否会使用它，但非常感谢。
我回来时遇到了 SVG，并爱上了用 CSS 绘制图像和控制它们的能力:)

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：