Question

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

我正在处理列表项，因此这与我因为重复而被处罚的帖子完全不同。它只涉及一个元素，而我的链接包含在导航栏的一部分，所以有点不同。

我想要这个：

enter image description here

和我正在使用的HTML / SCSS（失败）如下：

<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

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

enter image description here

现在你看到边框的边缘如何形成，然后你可以给它高度0和宽度0，你将有一个由边框制成的梯形长度为0，所以你有一个三角形。喜欢这个

enter image description here

Tha T用于顶部边界，B用于底部边界，R用于战斗边界，L用于左侧边界。现在你只是给边框颜色。你可以有红色的R和其他的白色，你会有一个指向左边的三角形。与L边界相同。

现在你可以使用div作为普通矩形并使用伪选择器：after和：before给它一些边框并在开头和结尾处创建两个三角形你将拥有六边形

看到jsfiddle，我为你创建了一个带有黑色边框的外观，以注意边框的位置：http://jsfiddle.net/carloscalla/o742jd86/

查看#hexagon:after和#hexagon:before

中的边框

结果如下：

enter image description here

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

enter image description here

以下是另外两个仅使用一个元素的选项。我从其他答案中取出它们以显示更好的选项

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

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

enter image description here

Answer 2

这是我能用简单的CSS获得的最好的。它绝不是完美的，但嘿......可能有用。

enter image description here

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

使用列表项创建六边形形状

3 个答案: