6
A
답변
10
내 솔루션은, 크리스 Coyier에서 CSS 모양을 사용하여.
http://jsfiddle.net/dDejan/XSs9L/
4 개 추가 된 div는이 방법으로 모양하려는 용기의 각각에 대한 자바 스크립트 (물론, 실제로 jQuery를) 통해 삽입됩니다. 이 div의는 그것의 부모의 모서리에 절대적으로 배치되며, 스벤 Bieder
3
당신은 CSS triangles 기술을 사용하여 절대 위치 :before 및 :after 요소를 사용하여이를 구성 할 수 있습니다.
<div class="box"></div>
CSS : 여기
.box {
background-color:#2020ff;
height:50px;
width:50px;
position:relative
}
.box:after {
content:" ";
width: 0;
height: 0;
border-top: 10px solid #ffffff;
border-bottom: 10px solid transparent;
border-right:10px solid #ffffff;
position:absolute;
top:-9px;
right:0px;
}
+0
이 좋은 시작 같은 소리에 의해 게시 된 링크에 설명 된대로 그들이 따라 스타일, 예 코드를 공유하는 걱정 ? – zehelvion
+0
이것은 좋아 보이지만 코드를 설명 할 수 있습니까? 어떻게 작동하는지 완전히 이해하지 못합니까? – zehelvion
+1
국경의 모퉁이 조각에서 삼각형을 만드는 것은 오래된 트릭입니다. 이 경우 파란색 상자의 일부를 덮는 흰색 삼각형입니다. 다음에서 설정을 편집 할 수 있습니다. 다음과 함께 다른 것을 사용하십시오 : 왼쪽 위 모퉁이를 은폐하기 전에. 그것이 어떻게 작동하는지 : http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work –
21
봐. 거기 당신은 당신이 필요로하는 모든을 찾습니다 경우
http://css-tricks.com/examples/ShapesOfCSS/
편집 이 링크가 손실 간다 :
CSS 여기
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0; left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px; height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
+0
네 말이 맞아, 내가 바꿨다 –
+0
하지만 받아 들여지지 않았다. 지금 대답하십시오. 부끄러움. 네가 더 낫다. –
+0
문제 없습니다. 다른 대답이 그를 위해 더 잘 작동하면 괜찮습니다. 결국 그것은 사람들을 돕는 것이며 누가 받아 들여지는지에 관한 것이 아닙니다. –
1
box {
background-color: transparent;
position: fixed;
width: 300px;
height: 300px;
}
svg {
width: 300px;
height: 300px;
}
polygon {
visibility: visible;
background: black;
stroke: white;
}<box>
<svg>
<polygon points="0 250, 50 300, 300 300, 300 50, 250 0, 0 0" />
</svg>
</box>
오직 하나의 추가 요소로 완료 될 수 있습니다 –
@ VladimirStarkov, 그 통찰력있는 코멘트 주셔서 감사합니다. :) – dDejan