Search code examples
cssshapescss-shapes

Creating unusal CSS3 shape to replace image

I am making a game for which all the styling is in css3.

The frame has buttons either side as you can see in the DEMO. But currently I have had to make images for the button wrappers as I could not find an elegant solution via css3.

I have made these images for retina screens so that you can not tell the difference between the code and the image but I would love to see a copy of this as a css shape but I am not sure it is possible?

Many thanks for any help

EDIT: This shape has a 4px solid white border either side and a 2px box shadow to the outer side (depending on whether it is the left or right side).

Shape

HTML

<div class="interaction farmyard">

<div class="page-decorations"></div>

<div class="nav">
    <div class="left"><span class="btn prev"></span></div>
    <div class="right"><span class="btn next"></span></div>
</div>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none outside none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
}
.clearfix:after {
    clear: both;
    content: "";
    display: table;
}
body {
    background: none repeat scroll 0 0 #71AFDF;
    font-family: 'Open Sans';
}
.interaction {
    background: none repeat scroll 0 0 #E7F3FF;
    border: 4px solid #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    color: #054B98;
    height: 620px;
    margin: 35px auto 20px;
    padding: 20px;
    position: relative;
    width: 930px;
}
.page-decorations {
    background: none repeat scroll 0 0 #00576F;
    border: 4px solid #FFFFFF;
    border-radius: 9px 9px 9px 9px;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.interaction .nav {
    left: -42px;
    margin-top: -80px;
    position: absolute;
    right: -42px;
    top: 50%;
}
.interaction .nav > div {
    background: url("http://s16.postimg.org/5fp9qny85/button_containers_retina.png") no-repeat scroll 0 0 / 250px 165px transparent;
    border-radius: 100% 100% 100% 100%;
    height: 165px;
    left: -1px;
    position: absolute;
    width: 125px;
}
.interaction .nav > .right {
    background-position: -122px 0;
    left: auto;
    right: 2px;
}
.interaction .nav > .left > .btn {
    display: block;
    left: 25px;
    position: absolute;
    top: 44px;
}
.interaction .nav > .right > .btn {
    display: block;
    position: absolute;
    right: 21px;
    top: 44px;
}
.btn {
    background: none repeat scroll 0 0 #108FE8;
    border: 4px solid #FFFFFF;
    border-radius: 100% 100% 100% 100%;
    box-shadow: 0 -2px 0 3px #0869AF inset, 0 5px 5px rgba(24, 24, 25, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: all 100ms ease-in 0s;
    -moz-transition: all 100ms ease-in 0s;
    transition: all 100ms ease-in 0s;
    height: 75px;
    width: 75px;
}
Solution

  • My shabby try :D

    http://jsfiddle.net/takrN/5/

    Mi goal was to create the shape only with one <div>but it's a little tricky! Finally I have the main shape, but without border and shadow.

    This is pretty funny :D If I had time I'll try to refine later!

    UPDATED: I have tried the way Troy Alford reccomends! It looks more accurate, and finally here's the border with shadow! Not match 100% by the circular border, but... only one div mates! Only one div! And I Cut-My-Own-Throat! :D

    Here's another version with properly border (a bit overlaped), but... with two <div>: http://jsfiddle.net/takrN/8/