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

当我需要一个宽度为60px，高度为22px的矩形，并且两侧还有三角形时，有谁能帮我解决这个问题？

- michbeck

---

相关问题：https://dev59.com/Ul8e5IYBdhLWcg3wucRT，使用稍微不同的方法生成六边形。计算也相对简单。 - Harry

@michbeck 这是你想要的吗？JSFiddle - http://jsfiddle.net/kweydhvL/1/ - Anonymous

我不确定我理解你问题的确切目标，你能否通过一个形状的图像来澄清一下？ - web-tiki

@Web-tiki：我的理解是 OP 想知道如果 .hexagon 元素的高度变为 22px 而不是当前的34.64px，三角形的边框宽度应该是多少。可能需要数学定理来计算矩形区域高度基础上的三角形区域的边长。 - Harry

@michbeck 也请查看这个 - http://jsfiddle.net/kweydhvL/2/ - Anonymous

太棒了，非常感谢！我更喜欢Mary Melody的解决方案 -> http://jsfiddle.net/kweydhvL/2/ - michbeck

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>

- Anonymous