六边形 CSS（具有“箭头效果”的矩形）

Question

请参阅我现在使用的以下 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>

任何人帮助我可以做什么，当我需要一个矩形width:60px，并height:22px和三角形左/右哪些配合？

Answer 1

JSFiddle -演示

.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>