CSS3圓角六角形

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