我正在制作一个所有样式都在 css3 中的游戏。
正如您在演示中看到的那样，框架的两侧都有按钮。但目前我不得不为按钮包装器制作图像，因为我无法通过 css3 找到优雅的解决方案。
我已经为视网膜屏幕制作了这些图像，因此您无法区分代码和图像之间的区别，但我希望看到它的副本作为 css 形状，但我不确定这是否可能？
非常感谢您的帮助
编辑：这个形状的两边都有一个 4 像素的纯白色边框，外侧有一个 2 像素的盒子阴影（取决于它是左侧还是右侧）。
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;
}