使用列表项创建六边形 [重复]

Question

我已经尝试了多个选项和教程，但是，我正在处理一个 Wordpress 站点，并且只能为这个导航菜单自定义 HTML 输出……我怎样才能使标题中的这两个菜单项工作?

我正在处理列表项，因此这与我因重复而受到处罚的帖子的工作方式并不完全相同。它只处理一个元素，而我的链接包含在 li 中，它们是导航栏的一部分，所以有点不同。

我想要这个：

我正在使用的 HTML/SCSS（未成功）如下：

http://codepen.io/anon/pen/wsodI

<ul id="menu-right-menu-buttons" class="right-menu">
<li id="menu-item-8439" class="first-item menu-item-type-post_type menu-item-object-page menu-item-8439"><a href="#">Businesses</a></li>
<li id="menu-item-8438" class="last-menu-item menu-item menu-item-type-post_type menu-item-object-page menu-item-8438"><a href="#">Job Seekers</a></li>
</ul>

.right-menu {
    float: right;

    li {
        display: inline-block;
        position: relative;
        z-index: 9999;
        left: -100px;
        height: 20px; 
        border-left: 60px solid transparent; 
        border-right: 60px solid transparent; 
        border-bottom: 100px solid #021e4e;

        a {
            vertical-align: middle;
            position: relative;
            top: 50%;
        }
    }

    li:after {
        position: relative; 
        height: 0px; 
        width: 200px; 
        border-top: 100px solid #021e4e; 
        border-left: 60px solid transparent; 
        border-right: 60px solid transparent;
    }
}

Answer 1

您可以使用边框属性创建一个三角形。你会看到一个像这样的普通盒子，如果它有 30px 高 30px 宽和一些边框，让我们给它 5px 边框

现在您看到边界的边缘是如何形成的，然后您可以将其高度为 0 和宽度为 0，您将获得由边界构成的梯形的一侧长度为 0，这样您就有了一个三角形。像这样

T是上边框，B是下边框，R是战斗边框，L是左边框。现在你只需给边框颜色。你可以有红色的R，其他的白色，你会有一个指向左边的三角形。与 L 边框相同。

现在您可以使用 div 作为普通矩形并使用伪选择器，:after 和 :before 给它一些边框，并在开头和结尾制作两个三角形，您将拥有您的六边形

查看 jsfiddle，我为您创建了一个带有黑色边框的 exagon，以注意边框在哪里：http://jsfiddle.net/carloscalla/o742jd86/

查看#hexagon:after 和#hexagon:before 中的边框

这是结果：

更新：如果您想要边框，您可以将一个 Hexagon 与另一个 Hexagon 重叠，就像在纯 CSS 中的这个 jsfiddle 中一样：http://jsfiddle.net/carloscalla/o742jd86/1/

这里有另外两个选项，您可以只使用一个元素。我从其他答案中提取了它们以在这里显示更好的选择

http://codepen.io/hari_shanx/pen/tsLza

http://codepen.io/anon/pen/sKamk

Answer 2

这是我能用纯 CSS 得到的最好的。这绝不是完美的，但嘿...可能有用。

http://jsfiddle.net/bc9a5Lof/2/

HTML：

<div id="hexagon"><div class="inner">Job Seekers</div>    </div>

（请注意，我确实在链接框中添加了一个 div。这是为了获得白色边框。）

和 CSS：

body {
    padding:100px;
    background:#aaa;
}
#hexagon {
    display:inline-block;
    height: 54px;
    padding:3px 0;
    background:#fff;
    position: relative;
}
#hexagon .inner {
    display:inline-block;
    height: 54px;
    padding:0 20px;
    background: #021E4D;
    position: relative;
    color:#fff;
    font:16pt/54px Arial;
}
#hexagon:before {
    content: "";
    position: absolute;
    left: -20px;
    top:0;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 20px solid #fff;
}
#hexagon:after {
    content: "";
    position: absolute;
    right: -20px;
    top:0;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 20px solid #fff;
}
#hexagon .inner:before {
    content: "";
    position: absolute;
    left: -17px;
    top:1px;
    width: 0;
    height: 0;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-right: 17px solid #021E4D;
}
#hexagon .inner:after {
    content: "";
    position: absolute;
    right: -17px;
    top:1px;
    width: 0;
    height: 0;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 17px solid #021E4D;
    z-index:100;
}

如有任何问题，请随时向我提问。 :)

Answer 3

您可以使用 HTML5 画布编程进行绘图和填充。

最好的框架是我正在使用的，它响应迅速且轻量级，您将在 12KB(Zipped) 中获得 Bootstrap 的所有功能，并且易于理解。您也将在手机上获得 100 的页面速度。

检查这个：http://skhost.in/one

点击下方查看速度：

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fskhost.in%2Fone&tab=desktop