CSS3 Rounded Hexagon

Question

Я пытаюсь создать форму с CSS: закругленный шестиугольник (который также удлинен). Я пробовал думать о нескольких разных способах (например, ящик для тела и два округлых треугольника сверху и снизу), но до сих пор я не придумал ничего хорошего. У кого-нибудь есть идеи по созданию этой формы в CSS? (Ближе я пришел, не удлинение: http://cdpn.io/fhpiH)

Answer 1

Это не идеально, но, возможно, это будет толкать вас в правильном направлении ...

http://jsfiddle.net/3b7j5/1/

Я использовал 2 квадраты, которые я повернул, и дал им border с двух сторон. Края затруднены, но, возможно, с некоторой настройкой вы можете сделать перекрытие границы лучше

Answer 2

Мое решение, почти там. :)

JSFiddle Demo

Используя 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

Answer 3

Мой Вариант CSS3 шестиугольник с границы и рамка-тень и радиус границы on dream-notes and demo at cssdesk