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.

Comments are closed.