六角CSS（矩形與「箭效應」）

請參看下面的CSS規則，我現在使用，以創建「箭頭效果」左，右一個矩形：六角CSS（矩形與「箭效應」）

CSS：

.hexagon { 
    position: relative; 
    width: 60px; 
    height: 34.64px; 
    background-color: #64C7CC; 
    margin: 17.32px 0; 
} 

.hexagon:before, 
.hexagon:after { 
    content: ""; 
    position: absolute; 
    width: 0; 
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent; 
} 

.hexagon:before { 
    bottom: 100%; 
    border-bottom: 17.32px solid #64C7CC; 
} 

.hexagon:after { 
    top: 100%; 
    width: 0; 
    border-top: 17.32px solid #64C7CC; 
}

HTML：

<div class="hexagon"></div>

誰能幫我出來的時候，我需要與矩形做什麼和height:22px和三角形左/右哪個適合？

來源

2014-09-11 michbeck

相關問題：http://stackoverflow.com/questions/25445118/elongated-hexagon-shaped-button-using-only-one-元素用稍微不同的方法來生成六角形。計算也相對簡單。 – Harry 2014-09-11 13:31:10

@michbeck這就是你想要的嗎？ JSFiddle - http://jsfiddle.net/kweydhvL/1/ – Anonymous 2014-09-11 13:36:33

我不舒服我明白你的問題的確切目標，你能澄清你想要實現的形狀的圖像嗎？ – 2014-09-11 13:39:25

的jsfiddle - DEMO

.hexagon { 
 
    position: relative; 
 
    width: 60px; 
 
    height: 22px; 
 
    background-color: #64C7CC; 
 
    margin: 50px; 
 
} 
 

 
.hexagon:before, 
 
.hexagon:after { 
 
    content: " "; 
 
    position: absolute; 
 
    border-top: 11px solid transparent; 
 
    border-bottom: 11px solid transparent; 
 
} 
 

 
.hexagon:before { 
 
    left: 100%; 
 
    border-left: 11px solid #64C7CC; 
 
} 
 

 
.hexagon:after { 
 
    right: 100%; 
 
    border-right: 11px solid #64C7CC; 
 
}

<div class="hexagon"></div>

來源

2014-09-11 14:09:32 Anonymous

六角CSS（矩形與「箭效應」）

回答

相關問題