如何用纯 CSS 创作六边形按钮特效

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

效果预览

在线演示

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

https://codepen.io/comehope/pen/xjoOeM

可交互视频教程

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/c/cQ74NAJ

源代码下载

本地下载

每日前端实战系列的全部源代码请从 github 下载：

https://github.com/comehope/front-end-daily-challenges

代码解读

定义dom，容器中只包含 1 个按钮：

&lt;nav&gt;

    &lt;ul&gt;

        &lt;li&gt;Home&lt;/li&gt;

    &lt;/ul&gt;

&lt;/nav&gt;

定义按钮样式：

nav {

    --h: 3em;

}

nav ul {

    padding: 0;

}

nav ul li {

    list-style-type: none;

    width: calc(var(--h) * 1.732);

    height: var(--h);

    background-color: #333;

    color: white;

    font-family: sans-serif;

    text-align: center;

    line-height: var(--h);

}

用伪元素增加2个倾斜的矩形：

nav ul li {

    position: relative;

}

nav ul li::before,

nav ul li::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: inherit;

    height: inherit;

    background-color: #333;

}

nav ul li::before{

    transform: rotate(60deg) translateX(calc(var(--h) * -2));

}

nav ul li::after{

    transform: rotate(-60deg) translateX(calc(var(--h) * 2));

}

增加鼠标划过效果：

nav ul li::before,

nav ul li::after {

    z-index: -1;

    filter: opacity(0);

    transition: 0.3s;

}

nav ul li:hover::before {

    filter: opacity(1);

    transform: rotate(60deg) translateX(0);

}

nav ul li:hover::after {

    filter: opacity(1);

    transform: rotate(-60deg) translateX(0);

}

dom 中增加几个按钮，形成一组按钮：

&lt;nav&gt;

    &lt;ul&gt;

        &lt;li&gt;Home&lt;/li&gt;

        &lt;li&gt;Products&lt;/li&gt;

        &lt;li&gt;Services&lt;/li&gt;

        &lt;li&gt;Contact&lt;/li&gt;

    &lt;/ul&gt;

&lt;/nav&gt;

按钮之间为鼠标划过效果留出边距：

nav ul li {

    margin: 2em;

}

再增加两组按钮：

&lt;nav&gt;

    &lt;ul&gt;

        &lt;li&gt;Home&lt;/li&gt;

        &lt;li&gt;Products&lt;/li&gt;

        &lt;li&gt;Services&lt;/li&gt;

        &lt;li&gt;Contact&lt;/li&gt;

    &lt;/ul&gt;

&lt;/nav&gt;

&lt;nav&gt;

    &lt;ul&gt;

        &lt;li&gt;Home&lt;/li&gt;

        &lt;li&gt;Products&lt;/li&gt;

        &lt;li&gt;Services&lt;/li&gt;

        &lt;li&gt;Contact&lt;/li&gt;

    &lt;/ul&gt;

&lt;/nav&gt;

&lt;nav&gt;

    &lt;ul&gt;

        &lt;li&gt;Home&lt;/li&gt;

        &lt;li&gt;Product Vs&lt;/li&gt;

        &lt;li&gt;Services&lt;/li&gt;

        &lt;li&gt;Contact&lt;/li&gt;

    &lt;/ul&gt;

&lt;/nav&gt;

最后，尝试一些变化：

nav {

    --h: 3em;

}

nav:nth-child(1) {

    --rate: 1.5;

    --bgcolor: black;

}

nav:nth-child(2) {

    --rate: 1.732;

    --bgcolor: brown;

}

nav:nth-child(3) {

    --rate: 2;

    --bgcolor: green;

}

nav ul li {

    width: calc(var(--h) * var(--rate));

    background-color: var(--bgcolor);

}

nav ul li::before,

nav ul li::after {

    background-color: var(--bgcolor);

}