이미지를 바꾸기 위해 비정상적인 CSS3 모양 만들기

Question

모든 스타일이 css3 인 게임을 만들고 있습니다.

프레임에는 DEMO에서 볼 수있는 것처럼 양쪽에 버튼이 있습니다. 하지만 저는 현재 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; 
} 

Answer 1

내 초라한 시도 : D

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

미 목표는 단 하나의 <div>으로 모양을 만드는 것이었다 그러나 그것은 조금 까다로운! 마지막으로 나는 주 모양이 이지만 테두리와 그림자는 사용하지 않습니다. .

이것은 꽤 재미 있습니다. D 시간이 있다면 나중에 수정하려고합니다!

업데이트 : 나는 트로이 앨 포드의 길을 시험해 보았습니다! 더 정확하게 보입니다. 그리고 마침내 그림자가있는 경계가 있습니다! 원형 테두리에 100 % 일치하지 않지만 ... 하나만 div 메이트!단 하나 div! 그리고 나는 컷 - 내 - 자신 - 목구멍! : D

여기에 두 <div>로 ... 제대로 경계 (약간 overlaped)와 다른 버전입니다,하지만 : http://jsfiddle.net/takrN/8/

Answer 2

이 도움이 될 것입니다 만약 내가 전혀 생각이 없다하지만 당신은 캔버스에 이미지를 변환 고려 했는가? 이것은 어떤 식 으로든 귀하의 요구 사항을 충족시킬 수 있습니까?

이 좋은 정보가 있으시면 here 자바 스크립트를 사용하여 확인하십시오.

그것은

난 단지 css3D는 3D UI 요구 사항과 크로스 장치/크로스 플랫폼 앱 변환 및 SVG와 주변 방귀하려고 사용할 수있는 함께 붙어있어 not all browsers/devices support canvas drawing 말했다되고. 그것은 꽤 고통 스러웠다.

Answer 3

여기 꽤 단단한 시작이다 : http://jsfiddle.net/carasin/QMaBc/16/

당신이 정말로 그것을 파고 경우는 사각형을 만들고 곡선 조각을 오버레이의 조합입니다 볼 수 있습니다.

나는 마크 업에 비트를 추가해야 않았다

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

CSS의가, 비록 바이올린을 살펴.

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