用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来实现表现效果。

Answer 2

您可以使用伪元素::before和::after

https://jsfiddle.net/Eg53q/2/