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.

2 thoughts on “CSS Card Suit Shapes: The Club

  1. And here is the Spade!

    (Using the same html code)

    #circle {
    width: 100px;
    height: 100px;
    background: black;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    position:absolute;
    left: 63px;
    top:45px;
    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:35px;
    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:35px;
    z-index: 100;
    content: "";
    }

    #triangle {
    width: 100;
    height: 50;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid black;
    position:absolute;
    top:0px;
    left: 13px;
    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: "";
    }

    1. Awesome! Thanks Michele!

      For anyone else checking these out, keep in mind that the white borders would need to change to the color of the background you’re putting these on.

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *