六角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（矩形与“箭效应”）

回答

相关问题