Creating unusal CSS3 shape to replace image

Question

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).

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

Answer 1

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/

Answer 2

Here's a pretty solid start: http://jsfiddle.net/carasin/QMaBc/16/

If you really dig into it you'll see it's a combination of creating rectangles and overlaying curved pieces.

I did have to add a bit to the markup:

<div class="interaction farmyard">
    <div class="page-decorations"></div>
        <div class="nav">
            <div class="left">
                <span class="btn prev"></span>
                <div class="top-right-corner"></div>
                <div class="bottom-right-corner"></div>
            </div>
            <div class="right">
                <span class="btn next"></span>
                <div class="top-left-corner"></div>
                <div class="bottom-left-corner"></div>
            </div>
        </div>
    </div>
</div>

The CSS, take a look at the fiddle though.

.interaction .nav > div {
    background: #E7F3FF;
    border:5px solid #fff;
    border-radius: 100% 100% 100% 100%;
    height: 101px;
    width: 101px;
    left: -1px;
    position: absolute;
    z-index:1;
}
.interaction .nav > .right {
    left: auto;
    right: -1px;
}
.interaction .nav > .left > .btn {
    display: block;
    left: 9px;
    position: absolute;
    top: 9px;
}
.interaction .nav > .right > .btn {
    display: block;
    position: absolute;
    right: 9px;
    top: 9px;
}
.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;
}
.btn:after {
    content:"";
    display:block;
    background:#E7F3FF;
    height:130px;
    width:31px;
    position:absolute;
    left:25px;
    top:-26px;
    z-index:-1;
}
.right .btn:after {
    left:auto;
    right:25px;
}
.top-right-corner {
    content:"";
    display: block;
    width: 14px;
    height: 37px;
    background: #00576F;
    border-radius: 0 0 0 29px;
    position: absolute;
    top: -38px;
    right: 25px;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
}
.top-right-corner:before {
    content:"";
    display: block;
    width: 40px;
    height: 40px;
    background: #00576F;
    border-radius: 95px;
    position: absolute;
    top: 0px;
    right: -27px;
}
.bottom-right-corner {
    content:"";
    display: block;
    width: 14px;
    height: 37px;
    background: #00576F;
    border-radius: 29px 0 0 0;
    position: absolute;
    bottom: -36px;
    right: 25px;
    border-left: 4px solid #fff;
    border-top: 4px solid #fff;
}
.bottom-right-corner:before {
    content:"";
    display: block;
    width: 40px;
    height: 40px;
    background: #00576F;
    border-radius: 95px;
    position: absolute;
    top: -3px;
    right: -29px;
}
.top-left-corner {
    content:"";
    display: block;
    width: 14px;
    height: 37px;
    background: #00576F;
    border-radius: 0 0 29px 0;
    position: absolute;
    top: -38px;
    left: 25px;
    border-right: 4px solid #fff;
    border-bottom: 4px solid #fff;
}    
.top-left-corner:before {
    content:"";
    display: block;
    width: 40px;
    height: 40px;
    background: #00576F;
    border-radius: 95px;
    position: absolute;
    top: 0px;
    left: -27px;
}
.bottom-left-corner {
    content:"";
    display: block;
    width: 14px;
    height: 37px;
    background: #00576F;
    border-radius: 0 29px 0 0;
    position: absolute;
    bottom: -36px;
    left: 25px;
    border-right: 4px solid #fff;
    border-top: 4px solid #fff;
}
.bottom-left-corner:before {
    content:"";
    display: block;
    width: 40px;
    height: 40px;
    background: #00576F;
    border-radius: 95px;
    position: absolute;
    top: -3px;
    left: -29px;
}

Answer 3

I have absolutely no idea if this would be helpful but have you considered converting your image to canvas? Would this fulfill your requirements in any way?

There's some good info on this here if your ok with using javascript to accomplish this.

That being said not all browsers / devices support canvas drawing

I got stuck with only being able to use css3D transforms for a cross device / cross platform app with a 3D UI requirement and tried to fart around with SVG. It was pretty painful.