CODEWITHSUNDEEP
htmlcss
Diego
Diego

Reputation: 964

Draw a rectangle figure and 2 additional squares with CSS

I'm currently trying to draw the following image with CSS

enter image description here

I have get this code that helps me with the rectangle. Here I have the 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;
}

How to draw the additional components?

Upvotes: 0

Views: 143

Answers (2)

bsb_coffee
bsb_coffee

Reputation: 7051

You can use pseudo-elements ::before and ::after

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

Upvotes: 1

Ming
Ming

Reputation: 4588

You can do this with the ::before and ::after pseudo-elements.

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: ' ';
}

It means you don't need to add any superfluous HTML to achieve a presentational effect.

Upvotes: 2

Related Questions