CSS, CSS3를 사용하여 원하는 모양을 만들고 그에 따라 위치를 잡는 방법?

Question

아래

는 내 페이지 중 하나에 표시 할 디자인을 보여줍니다 이미지,

나는 위와 같이 디자이너가 그렇게 설계보다 개발자의 더있어 꽤 이상입니다 나에게 수준. 위의 작업을 수행하는 방법에 대한 제안이나 요령? (예를 들어 jsfiddle 또는 그와 같은 플랫폼을 통한 예제는 매우 도움이 될 것입니다.))

Answer 1

나는 당신의 노력이 부족하기 때문에 질문을 끝내지 않았을 것입니다. , 그래서 ... 여기 내 솔루션을 게시 할 생각

당신은 CSS가 그것을 달성하기 위해 border-radius과 함께 수레 사용할 수 있습니다

... Demo

설명

: 여기에, 나는에 대한 border-radius을 사용하고 있습니다 요소 곡선, 및 원 뒤에 숨길 수있는 밴드에 대한 부정적인 margin ...

를 사용하는 것은 지금이 솔루션은 ... 원 주위에 20px흰색 국경을 사용하고 당신이 어떤 배경을 가지고있는 경우 유용하지 않을 수 있습니다

HTML

<div class="wrap"> 
    <div class="circle"></div> 
    <div class="band_wrap clear"> 
     <div class="band"></div> 
     <div class="band"></div> 
    </div> 
</div> 

CSS

.wrap { 
    position: relative; 
    width: 390px; 
} 

.wrap > div.circle { 
    height: 150px; 
    width: 150px; 
    border: 20px solid #fff; 
    border-radius: 50%; 
    background: #aaa; 
    float: left; 
    z-index: 1; 
    position: relative; 
} 

.band_wrap { 
    position: relative; 
    top: 20px; 
} 

.wrap .band { 
    height: 50px; 
    background: #aaa; 
    width: 200px; 
    border-radius: 0 20px 20px 0; 
    float: left; 
    margin-top: 15px; 
    margin-left: -20px; 
} 

.clear:after { 
    clear: both; 
    display: table; 
    content: ""; 
}