복잡한 모양을 만들 때 CSS 3 border-radius를 어떻게 사용합니까?

Question

저는이 모양을 css3을 사용하여 만들고 있습니다. 그러나 나는 그것을 만들기위한 우아한 해결책을 찾지 못했습니다. css3shapes에서 몇 가지 샘플을 시도했지만 꽤 간단합니다. 어떻게 복잡한 모양을 그려야할까요? 하나 개의 요소와 border-radius

테두리 반경 불가능

Answer 1

는이

border-top-left-radius: 1px 2px; 
    border-top-right-radius: 3px 4px; 
border-bottom-left-radius: 5px 6px; 
border-bottom-right-radius: 7px 8px; 

당신은 할 수없는 것보다 더 이상에 추천 인수를 받아들입니다.

는 플러스 요소/상자는 해당 모양이 적어도 10 개 모서리가 있어야합니다, 4 개 코너가 있습니다.

나쁜 생각 될 수도 있지만 당신은 배경으로 wan't하지 않으면 당신은 border-image를 사용할 수 있습니다.

또는 SVG 사용

Answer 2

경계 반경 모양 구문을 사용해보십시오. 가까운 장래에 너에게 올거야. 먼저 시도해보십시오. http://leaverou.github.io/border-corner-shape/