html - 使用 CSS 绘制一个矩形图形和 2 个额外的正方形

Question

我目前正在尝试使用 CSS 绘制以下图像

我得到了这段代码，可以帮助我处理矩形。我这里有 demo .

div.bonecard {
    width: 3.4in;
    height: 2.1in;
    border: 2px solid black;
    padding: 10px;
    -webkit-border-radius: .2in;
    -webkit-border-top-right-radius: .5in;
    -webkit-border-bottom-right-radius: .5in;
    -moz-border-radius: .2in;
    -moz-border-radius-topright: .5in;
    -moz-border-radius-bottomright: .5in;
    border-radius: .2in;
    border-top-right-radius: .5in;
    border-bottom-right-radius: .5in;
}

如何绘制附加组件？

Answer 1

您可以使用 ::before 和 ::after 伪元素来做到这一点。

http://jsfiddle.net/Eg53q/1/

div.bonecard:before, 
div.bonecard:after {
    position: absolute;
    left: -24px;
    top: 30px;
    width: 20px;
    height: 10px;
    border: 2px solid #000;
    content: ' ';
}

div.bonecard:after {
    top: 100px;
    width: 20px;
    height: 20px;
    content: ' ';
}

这意味着您无需添加任何多余的 HTML 即可实现展示效果。