div없이 이미지가 반올림 됨

Question

이 그래픽으로 사이트를 만들고 싶습니다. 그러나 문제는 커브입니다. 레이아웃을 해상도 광고의 크기로 조정할 수 있기 때문에 커브 이미지를 만들고 싶지 않습니다. 내부로 약간의 전환을하십시오. jQuery 나 css 3와 같은 레이아웃을 만들 수 있습니까? 반경 경계 등은 알고 있지만 이처럼 나는 어떻게 해야할지 모릅니다. 가능합니까? 배경은 흰색이지만 왼쪽과 int에서 그는 예를 들어 nes와 rss가있는 div가 있습니다. (참고 : 테두리에 그림자가 왼쪽과 곡선의 권리가

Answer 1

나는 카일의 솔루션으로 주위 재생 뭔가를 얻을 수 있었다 좋아

바이올린 : http://jsfiddle.net/G6SHH/3/

div 
{ 
    height: 500px; 
    width: 200px; 
    background: #ccc; 
    border-radius: 50px 0px 0px 50px/250px 0px 0px 250px; 
} 


div:after { 
    background-color: white; 
    border-radius: 50px 0 0 50px/250px 0 0 250px; 
    content: ""; 
    display: block; 
    height: 498px; 
    position: relative; 
    right: -154px; 
    width: 138px; 
} 

이 최신 브라우저에

Answer 2

당신은 할의 종류의 왼쪽을 얻을 수 있지만 border-radius과 오른쪽 부정적인를 허용하지 않습니다 값.

div 
{ 
    height: 500px; 
    width: 200px; 
    background: #ccc; 
    border: 3px solid #333; 
    border-radius: 50px 0px 0px 50px/250px 0px 0px 250px; 
}​ 

물론

http://jsfiddle.net/G6SHH/

---

, 당신은 공동 uld는 항상 맨 위에있는 다른 div 위에 레이어하지만 불필요한 마크 업이며 솔직하게 말하면 별 모양입니다.

http://jsfiddle.net/G6SHH/1/

당신은이에 대한 IMG를 사용해야 할 것입니다. 난 당신이 반경 함께 놀러해야 할 것 같아요

Answer 3

, 여기

내가 뭘하려에 대한 링크입니다 : http://jsfiddle.net/amandeepj/45XzA/ 그러나, 나는이에 도시 된 바와 같이, 즉 바로 DIV의 측면 테두리가 오목 경계를 acheive 할 수 없습니다 문제의 이미지.

어쨌든 이미지를 배경으로 사용했을 것입니다. 이 경우.

Answer 4

체크 아웃이 솔루션 작동합니다

을

라이브 데모 : http://codepen.io/anon/full/emAHu
01 23,516,소스 코드 : http://codepen.io/anon/pen/emAHu

특징 :
당신은 당신이 당신의 위치의 래퍼로 설정할 수있는 레이아웃입니다 div 내부 컨텐츠를 넣을 수 있습니다 *.
이 모든 것은 %age을 기반으로 *, 그건 당신이 근거에 아무것도 시도가, 모든

HTML

<div> 
    <p>Content inside the paragragh</p> 
</div> 

CSS

div{ 
    position: absolute; 
    background: url("http://placehold.it/400x400"); 
    width: 400px; 
    height: 400px; 
    border-radius: 50px 0px 0px 50px/250px 0px 0px 250px; 
    /* border-radius: 40% 0 0 40%; */ 
    padding: 25px; 
} 


div:after{ 
    content: ""; 
    display: block; 
    width: 100%; 
    height: 100%; 
    background: white; 
    position: absolute; 
    top: 0; 
    left: 60%; 
    border-radius: 50px 0px 0px 50px/250px 0px 0px 250px; 
    /* border-radius: 40%; */ 
}