2013-06-13 1 views
1

현재 바쁜 프로젝트에 어떻게 접근해야하는지 의문이 생겼습니다. 나는 이상한 형태의 헤더를 만들어야한다. 이 프로젝트는 모든 최신 장치에서 반응 적이어야합니다. 나는 CSS의 모양과 같은 도움을 찾고있는 다른 블로그를 확인했다. 이것은 나를 도왔지만 어떤 것이 최선의 접근법이 될지 모르겠습니다. CSS만으로 이상한 형태 생성하기

http://css-tricks.com/examples/ShapesOfCSS/

싶다고되는 디자인

이 이미지와 비슷한 것입니다 :

enter image description here

당신은 또한 서로 다른 양쪽에 두 개의 커브가 볼 수 있듯이. 나는 이것을 헤더 요소로하고 싶습니다. 하나의 요소만으로 생성 할 수 있습니까? CSS로 이런 종류의 불규칙한 형태에 도달하는 방법에 대한 제안?

답변

3

border-top-left-radiusborder-top-right-radius을 사용하고 다른 값으로 설정하여이 작업을 수행 할 수 있습니다.


당신이, 네 모서리에 대해 개별적으로 국경 반경을 설정보다 일반적인 border-radius 속성을 사용하려는 경우

Example jsFiddle.

. 그건 구문은 다음과 같습니다

border-radius: top-left top-right bottom-right bottom-left 

Example jsFiddle.


border-radius는 IE (Internet Explorer 8 및 이전)의 이전 버전을 제외한 모든 주요 브라우저에서 지원됩니다.

border-radius을 이전 버전의 IE (6, 7, 8)에서 사용하려면 CSS3 PIE을 사용할 수 있습니다.

1

다음은 질문에서 원하는 머리글의 코드입니다.

헤더 크기에 따라 번호를 사용해야합니다. 그러나 이것은 올바른 방향으로 당신을 쫓아 버릴 것입니다.

http://codepen.io/BuoyantMedia/pen/ubIpG

+0

안녕하세요,이 작동하지만 나는 당신의 몸에 사업부를 사용하는 것 같습니다 것을 확인하고있어 (사각형-내부는) 예상대로 헤더를 형성한다. 그러나 제 질문은 하나의 태그 만 사용하고 그 모양을 만드는데 초점을 맞추 었습니다. 나는

을 사용할 것이고 그 태그가이 양식을 갖기를 원합니다. 이것이 가능한가? 이 셰이프를 더 많이 사용할 것이므로 다른 div를 사용하지 않고 한 요소에이 방법을 적용하는 방법을 배워야합니다. 알 겠어? –

+0

이 코드가 아직 있습니까? codepen의 링크가 더 이상 작동하지 않습니다 ... –

+1

Codepen이 백업되었습니다. 이 코드 예제에서 여전히 가장 정확한 경우 내 대답을 올바르게 지적 해 주시면 감사하겠습니다. 고맙습니다. – BJack