我目前正在尝试使用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;
}
如何绘制其他组件?
答案 0 :(得分:2)
您可以使用::before
和::after
伪元素执行此操作。
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来实现表现效果。
答案 1 :(得分:1)
您可以使用伪元素::before
和::after