CSS Card Suit Shapes: The Club

Drawing inspiration from Chris Coyier’s “The Shapes of CSS” at CSS Tricks, I decided to have some fun with css and the suits in a deck of cards. The club is all CSS, however, it requires mulitple divs to pull off.

Club

The HTML:

                <div id="circle"></div>
                <div id="triangle"></div>
                <div id="base"></div>

The CSS:

           #circle {
                width: 100px;
                height: 100px;
                background: black;
                -moz-border-radius: 50px;
                -webkit-border-radius: 50px;
                border-radius: 50px;
                position:absolute;
                left: 63px;
                z-index: 100;
            }
            #circle:before {
                width: 100px;
                height: 100px;
                background: black;
                -moz-border-radius: 50px;
                -webkit-border-radius: 50px;
                border-radius: 50px;
                position:absolute;
                left:-60px;
                top:80px;
                z-index: 100;
                content: "";
            }

            #circle:after {
                width: 100px;
                height: 100px;
                background: black;
                -moz-border-radius: 50px;
                -webkit-border-radius: 50px;
                border-radius: 50px;
                position:absolute;
                left: 60px;
                top:80px;
                z-index: 100;
                content: "";
                }

            #triangle {
                width: 0;
                height: 0;
                border-left: 75px solid transparent;
                border-right: 75px solid transparent;
                border-bottom: 105px solid black;
                position:absolute;
                top:40px;
                left: 38px;
                z-index: 100;
            }
            #base {
                background: none repeat scroll 0 0 black;
                height: 70px;
                left: 0;
                position: absolute;
                top: 140px;
                width: 200px;
                z-index: 0;
            }
            #base:before {
                width:0px;
                height:10px;
                position:absolute;
                border-left: 50px solid white;
                border-right: 50px solid white;
                border-top: 10px solid white;
                border-bottom: 50px solid white;
                border-top-left-radius: 0px;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 60px;
                left: 0px;
                content: "";
            }

            #base:after {
                width:0px;
                height:10px;
                position:absolute;
                border-left: 50px solid white;
                border-right: 50px solid white;
                border-top: 10px solid white;
                border-bottom: 50px solid white;
                border-top-left-radius: 0px;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 60px;
                border-bottom-right-radius: 0px;
                left: 125px;
                content: "";
            }

Author’s Note: I had intended on doing all the card suits in one post, but after finishing the club I never got back to it. This post has been sitting in my drafts for a while now, and I just wanted to get it out. The heart and diamond can be found on CSS Tricks (linked above) and hopefully I’ll get to the spade soon.