순수한 CSS를 사용하여 불규칙한 모양의 테두리를 만들려면 어떻게해야합니까 (이미지 없음)?

효과적으로 배경 이미지 또는 이미지 기반 솔루션을 사용하지 않으려 고합니다.

참고 : 빨간색 화살표는 문제의 경계를 가리키고 있습니다. 답변에 화살표가 포함되어서는 안됩니다.

순수한 CSS를 사용하여 불규칙한 모양의 테두리를 만들려면 어떻게해야합니까 (이미지 없음)? 이미지를 피할 수없는 경우 가장 간결하고 읽기 쉬운 답변이 상향 조정되고 승인됩니다.

CSS를 사용할 수 있습니다 (이전 버전의 IE에서는 작동하지 않습니다).

예를 들어 사각형과 두 개의 삼각형과 같은 일부 모양을 결합 할 수 있습니다. 이 jsfiddle을 참조하십시오 .

HTML :

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

그리고 CSS :

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

여기 에서 다양한 CSS 모양을 볼 수 있습니다 . 모두가 둘 이상의 div를 요구하지는 않지만 대부분 어두운 테두리를 적용해야합니다.

Yisela의 대답은 확실하지만 CSS 대안과 클립 경로가있는 다각형 또는 이미지 URI를 사용 하여이 대안을 제공 할 것이라고 생각했습니다. 다음은 간단한 튜토리얼 입니다.

이 방법은 현재 삼각형 경계 트릭보다 더 적은 브라우저에서 작동합니다. 그러나보다 복잡한 모양을 사용하거나 텍스트를 모양으로 감싸려면이 방법이 좋습니다.

지원이 제한 될 수있는 또 다른 방법은 "CSS에 포함 된 SVG"입니다. 나는 이것을 직접 시도하지 않았지만 아이디어는 객체에 대한 CSS 선언 내에 URL로 이미지 리소스를 제공하고 데이터를 포함하는 올바르게 이스케이프 된 URL을 전달한다는 것입니다.

SVG는 일반 텍스트 / xml 형식입니다. 예제 다각형 ( w3schools ) :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg> 

예제 인라인 (내장) SVG (간체) ( 스택 오버 플로우에서 ) :

url("data:image/svg+xml;utf8, <svg></svg>");

SVG 데이터는 인라인 사용을 위해 올바르게 "이스케이프 처리"되어야하므로 SVG 파일을 링크하는 것보다 약간 덜 매력적입니다.

위의 링크 된 스레드에서 메소드의 실행 가능성에 관한 논의가 있습니다. 나는 흰색으로 채워진 삼각형처럼 단순한 것을 포함시키는 것이 쉬운 결정이라고 생각합니다. 복잡한 SVG 형식 데이터는 인라인이 아닌 SVG 파일로 저장해야합니다.

SVG 파일은 벡터이며 "테두리"방법과 달리 백분율로 크기를 조정할 수 있습니다. 또한 (현재) 클리핑 경로 방법보다 (최소한 인라인이 아닌) 지원을 제공합니다. 일반 텍스트 인 SVG는 PHP 나 다른 서버 측 스크립팅 등을 사용하여 즉석에서 내보낼 수도 있습니다.

이미지의 파란색 영역이 투명한 png이고 흰색 영역이 투명한 경우이 HTML을 포함시켜 그림자가 생기도록해야합니다.

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

그리고 이미지 에서이 CSS를 사용하십시오 :

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

이것은 완벽한 브라우저 간 솔루션입니다.