나는 둥근 육각형 (또한 길쭉한 모양)으로 CSS로 도형을 만들려고합니다. 나는 몇 가지 다른 방법을 생각해 보았습니다. (몸통 상자와 꼭대기와 바닥에 2 개의 둥근 삼각형이 있습니다.) 그러나 지금까지는 좋은 점이 없었습니다. 누구나 CSS에서이 모양을 만들 수있는 아이디어가 있습니까? (제가 왔어요 가까운, 더 신장 : http://cdpn.io/fhpiH)CSS3 둥근 육각형
1
A
답변
0
그것은 완벽 하진,하지만 어쩌면이 올바른 방향으로 밀어 것입니다 ...
나는 2를 사용하지 나는 회전하여 그들에게 2면에 border
을주었습니다. 가장자리가 까다 롭지 만 어쩌면 약간의 조정으로 국경의 겹침을 더 잘 만들 수 있습니다.
1
제 해결책은 거의 없습니다. :)
은 상단과 하단에 2 상자를 사용하여, 그들에게 45도 회전.
HTML
<div class="container">
<div class="box"></div>
<div class="middle"></div>
<div class="box"></div>
</div>
CSS
.container {
position:relative;
width:500px;
}
.middle {
border-left: 10px solid orange;
border-right: 10px solid orange;
height: 228px;
left: 137px;
position: absolute;
top: 132px;
width: 266px;
background:#fff;
z-index:20;
}
.box {
width:200px;
height:200px;
background:#fff;
border:10px solid orange;
-webkit-border-radius: 30px;
border-radius: 30px;
-moz-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg);
-webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
}
는 @koningdavid - 그의 해결책은 약간 좋네요, 나는 :before
및 :after
을 사용해야
0
내 변형 테두리 및 상자 그림자 및 테두리 반경 on dream-notes and demo at cssdesk
콘텐츠를 넣을 필요가 있습니까? 그게 뭐야? –
와우. 예. 거기에 내용이있을 것입니다. – motoxer4533
불필요한 일이기 때문에 이미지를 만드는 것에 대해 더 많은 것을 생각해보십시오. – motoxer4533