CSS3或帆布圓角六角形

我試圖用CSS做一個形狀：一個圓角六角形（也拉長）。我嘗試了幾種不同的方式（例如爲身體設計一個盒子，在頂部和底部放置兩個圓角三角形），但到目前爲止我還沒有提出任何好的方法。有沒有人有一些想法在CSS中創建這種形狀？CSS3或帆布圓角六角形

HTML

<div id="hexagon"></div>

CSS

#hexagon { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative; 
} 
#hexagon:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 25px solid red; 
} 
#hexagon:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 25px solid red; 
}

enter image description here

來源

2013-07-12 Melih Büyükbayram

你可以科幻在這裏找到一些信息。 http://stackoverflow.com/questions/14665093/is-it-possible-to-rounded-shapes-shapes-such-as-hexagon-octagon –

嘗試形狀從http://kizu.ru/Polygons/ –

非常感謝，這解決了這個問題。

前瞻：

http://codepen.io/melihbuyuk/pen/evrwI

HTML

<div class="container"> 
    <div class="hexagon"> 
    <div class="box1"></div> 
    <div class="middle1"></div> 
    <div class="box2"></div> 
    </div> 
</div>

CSS：

.container { position:relative; width:500px;} 

.middle1 { 
    border-left: 10px solid orange; 
    border-right: 9px solid orange; 
    height: 188px; 
    left: 35px; 
    position: absolute; 
    top: 59px; 
    width: 181px; 
    z-index:20; 
    border-radius:5px; 
} 
.box1 { 
    width:120px; 
    height:120px; 
    border-left: 10px solid orange; 
    border-top: 10px solid orange; 
    -moz-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -webkit-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -o-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -ms-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
} 

.box2 { 
    width:120px; 
    height:120px; 
    border-bottom: 10px solid orange; 
    border-right: 10px solid orange; 
    -webkit-border-radius: 20px; 
    margin-top:50px; 
    border-radius: 20px; 
    -moz-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -webkit-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -o-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    -ms-transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
    transform: scale(1) rotate(45deg) translateX(50px) translateY(-50px) skewX(-10deg) skewY(-10deg); 
}

來源

2013-07-12 10:48:07

在Firefox（Aurora）中無法正常工作。頂部被抵消。快照：http://i.imgur.com/k42Gaiy.png – K3N

ooppss對不起更新筆http://codepen.io/melihbuyuk/pen/evrwI –

+1。不錯只需要用CSS。 – K3N

CSS3或帆布圓角六角形

回答

相關問題