繪製一個矩形圖和2個CSS

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

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

Answer 2

您可以使用::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實現了表象的效果。