불규칙한 CSS 코너?

Question

CSS에서 불규칙한 모서리에 대한 고객의 요청이 있습니다. 그것도 문제일까요? 지금까지 CSS 삼각형 (http://css-tricks.com/snippets/css/css-triangle/)을 사용해 보았지만 부에노는 사용하지 않았습니다. 어떤 방식의 y'alls 알고 그것을 해내하지 않는 한 아마있을 것이다

https://dl.dropbox.com/u/4031469/irreg.png

생각은 슬프게도 ... 이미지와 함께 할 수 있습니다.

주요 매개 변수 : 높이가 최소한 유연해야하며 폭이 유연해야하지만 필수는 아닙니다. 현재 해결 방법 : 상자 위쪽에 잠재적으로 확장되어 상단 구석 효과가 보조 상자에서 작동하도록하는 위쪽 꼭지기 ... 하단 돌출 자 조각이 절대적으로 아래로 밀기 위해 정렬되었습니다.

내 가장 가까운 시도는 지금까지 (최고에 대한 이미지를 사용) : https://dl.dropbox.com/u/4031469/fs.html

Answer 1

은, 지금까지의 내가 연구 한,이의 내역은 아직 불가능하게 보인다.

이 외양은 미묘한 그래디언트와 내부 광선을 가지고 있습니다. 이는 inset 박스 섀도우를 사용하여 수행했는데 ... 이전의 CSS 삼각형 효과에서는 효과가없는 것 같습니다.

CSS 마스크는 많은 경우에 도움이 될 수 있지만, box-shadow: inset이 필요한 상황에서는 이미지 만 이동하는 방법입니다.

오늘 저는 브라우저 지원이 다양한 -webkit-clip-path 속성을 사용하여이 작업을 수행했습니다.

.entry{ 
    background-color: blue; 
    width: 500px; 
    height: 200px; 
    -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 40%, 100% 100%, 0 100%); 
    -webkit-transform: translateY(-30px); 
    top: 10px; 
    left: 0; 

} 

body{ 
    background-color: green; 
} 

http://codepen.io/randallb/pen/tmlAH

Answer 2

노라 브라운 CSS3 border-image property에 사랑스러운 기사를 썼다. 빠른 읽을 가치가 있습니다 ...

브라우저 간 지원이 걱정된다면 (그리고 반드시 있어야합니다), 멋진 대체 수단을 제공하십시오. 아마도 "미친 모서리"가없는 경계만으로는 대체로 상황이 아닌 어쩌면 그렇지 않을 수도 있습니다.

이 방법은 크로스 브라우저가 아니지만 일부 사용자는 "progressive"이 좋습니다.

Answer 3

http://jsfiddle.net/aBYHX/

편집 http://nicolasgallagher.com/pure-css-speech-bubbles/

에서 도둑질 : - 두 번째 시도. 더 간단한, 더 적은 CSS와 예 측 그림과 같은면에. http://jsfiddle.net/aBYHX/1/

<div class="content"> 
    <p class="triangle-isosceles">This only needs one HTML element.</p> 
    <p class="irregular-corner"> ---- </p> 
</div>​ 

CSS는 : CSS3에서

.content 
{ 
    padding: 15px; 
} 
.triangle-isosceles, .irregular-corner 
{ 
    position:relative; 
    padding:15px; 
    margin:1em 0 3em; 
    color:#000; 
    background:#f3961c; 
} 

.triangle-isosceles:after { 
    content:""; 
    position:absolute; 
    bottom: 0; 
    right: 0; 
    border-width: 25px 50px 0 0; 
    border-style: solid; 
    border-color: transparent white; 
    /* reduce the damage in FF3.0 */ 
    display:block; 
} 


.irregular-corner:before 
{ 
    content:""; 
    position:absolute; 
    top: -25px; 
    right: 0px; 
    border-width: 25px 50px 0 0; 
    border-style:solid; 
    border-color:transparent #f3961c; 
    /* reduce the damage in FF3.0 */ 
    display:block; 
} 
​