Hexagon CSS（带有“箭头效果”的矩形）答案

【问题标题】：Hexagon CSS (Rectangle with "Arrow-effect")Hexagon CSS（带有“箭头效果”的矩形）
【发布时间】：2014-09-11 13:26:42
【问题描述】：

请查看我现在使用的以下 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 的矩形以及适合的左/右三角形时，谁能帮我解决一下？

【问题讨论】：

相关问题：stackoverflow.com/questions/25445118/… 生成六边形的方法略有不同。计算也比较简单。
@michbeck 这就是你想要的吗？ JSFiddle - jsfiddle.net/kweydhvL/1
我不确定我理解你的问题的确切目的，你能用你想要达到的形状的图像澄清一下吗？
@michbeck 也检查这个 - jsfiddle.net/kweydhvL/2
好人，非常感谢！我更喜欢 Mary Melody 的解决方案 -> jsfiddle.net/kweydhvL/2

标签： css css-shapes

【解决方案1】：

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;
}

&lt;div class="hexagon"&gt;&lt;/div&gt;

【讨论】：