效果预览

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

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 个按钮:

<nav>
<ul>
<li>Home</li>
</ul>
</nav>

定义按钮样式:

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 中增加几个按钮,形成一组按钮:

<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>

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

nav ul li {
margin: 2em;
}

再增加两组按钮:

<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<nav>
<ul>
<li>Home</li>
<li>Product Vs</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>

最后,尝试一些变化:

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

大功告成!

前端每日实战:32# 视频演示如何用纯 CSS 创作六边形按钮特效的更多相关文章

  1. 前端每日实战:38# 视频演示如何用纯 CSS 创作阶梯文字特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教程 此视频 ...

  2. 前端每日实战:147# 视频演示如何用纯 CSS 创作透视按钮的悬停特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qJEdKb 可交互视频 此视频是可 ...

  3. 前端每日实战:21# 视频演示如何用纯 CSS 创作文本滑动特效的 UI 界面

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教程 此视频 ...

  4. 前端每日实战:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教程 此视频 ...

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

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xjoOeM 可交互视频教 ...

  6. 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...

  7. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

  8. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...

  9. 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...

随机推荐

  1. picker-view组件

    picker-view组件,是一个页面上的滚动选择器: 如果想进行滚动:他的子元素必须是  picker-view-column  组件: picker-view-column组件:只是提供了一个可视 ...

  2. leetcode-mid-Linked list-160 Intersection of Two Linked Lists-NO

    mycode 用了反转链表,所以不符合题意 参考: 思路: 1 先让长的链表先走,然后相同长度下看是否相遇 class Solution(object): def getIntersectionNod ...

  3. Redis安装启动,Redis Desktop Manager安装

    Window 下安装下载地址:https://github.com/MSOpenTech/redis/releases.Redis 支持 32 位和 64 位.这个需要根据你系统平台的实际情况选择,这 ...

  4. FOUC(Flash Of Unstyled Content)文档样式闪烁

    今天看面试题看到了这个新名词..我以前是没有发现过这种状况,应该是我一直都是将加载 CSS 的 link 标签写到 head 里的缘故吧. 什么是文档样式闪烁(Flash Of Unstyled Co ...

  5. VMware vMotion 配置要求

    目录 目录 vCenter 支持 vMotion 的前提 条件 vMotion 的主机配置 vMotion 共享存储器要求 vMotion 网络要求 最后 vCenter 支持 vMotion 的前提 ...

  6. 【ABAP系列】SAP 关于出口(user-exit)MV50AFZ1的一些问题

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 关于出口(user-ex ...

  7. Vue的生命周期(在其他地方看到一份非常好又详细的详解)

    链接地址:https://segmentfault.com/a/1190000011381906 首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.首先看一张图 ...

  8. 剑指offer--day03

    1.1题目:斐波那契数列:大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0).n<=39 1.2解题思路:斐波那契数列公式为: 这道题递归很好写 ...

  9. 获取文件夹中前N个文件

    @echo off set input="list.txt" set srcDir="%1" set /a fileCount=10 set /a curInd ...

  10. 使用NMAP端口扫描代码实现

    Nmap是一个网络连接端扫描软件,用来扫描网上电脑开放的网络连接端.确定哪些服务运行在哪些连接端,并且推断计算机运行哪个操作系统(这是亦称 fingerprinting).其基本功能有三个,一是探测一 ...