css - 创建不寻常的 CSS3 形状来替换图像

Question

我正在制作一个所有样式都在 css3 中的游戏。

如您在 DEMO 中所见，框架的两侧都有按钮.但目前我不得不为按钮包装器制作图像，因为我无法通过 css3 找到优雅的解决方案。

我为视网膜屏幕制作了这些图像，因此您无法分辨代码和图像之间的区别，但我很想看到它作为 css 形状的副本，但我不确定这是否可能？

非常感谢您的帮助

编辑:这个形状的两侧有一个 4px 的纯白色边框，外侧有一个 2px 的框阴影(取决于它是左侧还是右侧)。

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

我的破旧尝试 :D

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

Mi 的目标是只用一个形状来创建形状 <div>但这有点棘手!最后我有了主要形状， 但没有边框和阴影 。

这很有趣 :D 如果我有时间，我稍后会尝试完善!

更新:我已经尝试了 Troy Alford 推荐的方式!看起来更准确了，最后是带阴影的边框!不是通过圆形边框 100% 匹配，但是... 只有一个 div伙计们!只有一个div !我割断自己的喉咙! :D

这是另一个具有正确边框的版本(有点重叠)，但是......有两个 <div> : http://jsfiddle.net/takrN/8/