用clip-path的polygon绘制暂停图标
本帖最后由 马黑黑 于 2022-11-23 21:46 编辑关于clip-path，我们介绍过不少，有兴趣的可以用论坛的放大镜搜索一下。这里要谈的，如帖子标题所示，用clip-path的多边形方法polygon绘制一个暂停图标。本帖会涉及到之前没有谈到的知识点。
复习一下 clip-path 的 polygon 语句表达法：clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);
polygon里的参数，就是一系列的点的 {xy} 坐标，两个点间的坐标值用小角逗号隔开。比如画一个等边三角形：
clip-path: polygon(50% 10%, 10% 90%, 90% 90%);
这里，polygon的参数中，给出了等边三角形的三个角所在点的 {xy} 坐标值：① 50% 10% 是顶角，② 10% 90% 是底边左角，③ 90% 90% 是底边右角。clip-path 会自动闭合，将这三个点连接起来，构成一个等边三角形，三角形以外的区域被裁剪掉不可见—— clip-path 就是用来裁剪元素的，按指定的路径（path）裁剪，路径闭合的区域保留，闭合路径以外的区域不可见（也将不可接受点击等操作）。
绘制三角形是简单的，现在我们要做复杂一点的工作：绘制暂停按钮。
暂停按钮就是两道竖杠，||，用字符表示也是不错的最简单的实现方法，但字符的适应性略差，所以一般都不会使用。我们除了用图片，还可以通过CSS的clip-path绘制，稳定性和图片一样，用的还是 polygon 方法，路径的设置略为复杂一些：从第一道竖杠的左上角开始（35% 30%），往右走10个百分点（45% 30%），往下走40个百分点（45% 70%），再往左走10个百分比（35% 70%），到这里就得到了左边的竖杠；接着处理第二道竖杠，两道杠之间我们预设间距为10个百分比，那么，需要往右走20个百分比（55% 70%），继续往右走10个百分比（65% 70%），在往上走40个百分比（65% 30%），往左走10个百分比（55% 30%），往下走40个百分比（55% 70%），最后直接往左走、回到第一道杠的左下角（35% 70%）。
第一道杠的左边我们没有走，不必要，polygon会自动闭合；二两道杠的中央部分，根据上面设计的路径，它没有闭合属性，所以留空。代码如下：
clip-path: polygon(35% 30%, 45% 30%, 45% 70%, 35% 70%, 55% 70%, 65% 70%, 65% 30%, 55% 30%, 55% 70%, 35% 70%);
用百分比的好处在于：当元素尺寸改变时，我们不必修改路径各点的 xy 坐标值。
实例效果和完整代码在楼下。
本帖最后由 马黑黑 于 2022-11-23 20:42 编辑 <br /><br /><style>
#papa { margin: 10px auto; width: 90%; height: 400px; background: gray; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; }
#mplayer {
position: absolute;
display: grid;
place-items: end center;
gap: 10px 2px;
grid-template-areas: 'cur btnplay dur''prog prog prog' ;
font: normal 16px sans-serif;
z-index: 999;
--ww: 240px;
--color: snow;
--track: hsla(90,100%,95%,.65);
--prog: linear-gradient(90deg,hsla(90,30%,50%,.55),hsla(0,100%,50%,.75),hsla(180,100%,50%,.65));
}
#prog {
grid-area: prog;
position: relative;
width: 260px;
height: 4px;
background: var(--track);
display: grid;
place-items: center;
cursor: pointer;
}
#prog::before, #prog::after { position: absolute; content: ''; }
#prog::before {
height: 4px;
width: 50%;
left: 0;
background: var(--prog);
}
#prog::after {
left: calc(50% - 12px);
width: 16px;
height: 16px;
background: radial-gradient(transparent 2px, var(--color) 0, black);
border-radius: 4px;
}
#btnplay {
--dis1: block;
--dis2: none;
grid-area: btnplay;
width: 40px;
height: 40px;
border: 3px solid var(--color);
border-radius: 50%;
opacity: .95;
cursor: pointer;
transition: .3s;
position: relative;
}
#btnplay:hover { opacity: 1; box-shadow: 0 0 5px var(--color), inset 0 0 5px var(--color); }
#btnplay::before, #btnplay::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: var(--color);
}
#btnplay::before {
display: var(--dis1);
clip-path: polygon(35% 30%, 75% 50%, 35% 70%);
}
#btnplay::after {
display: var(--dis2);
clip-path: polygon(35% 30%, 45% 30%, 45% 70%, 35% 70%, 55% 70%, 65% 70%, 65% 30%, 55% 30%, 55% 70%, 45% 70%, 35% 70%);
}
#cur { grid-area: cur; color: var(--color); }
#dur { grid-area: dur; color: var(--color); }
</style>
<div id="papa">
<div id="mplayer">
<div id="prog"></div>
<div id="btnplay"></div>
<div id="cur">00:00</div>
<div id="dur">00:01</div>
</div>
</div>
<script>
let btnFlag = false;
btnplay.onclick = () => {
btnFlag ? (btnplay.style.setProperty('--dis1','block'),btnplay.style.setProperty('--dis2','none')) : (btnplay.style.setProperty('--dis1','none'),btnplay.style.setProperty('--dis2','block'));
btnFlag = !btnFlag;
}
</script>
二楼代码：
<style>
#papa { margin: auto; width: 90%; height: 400px; background: gray; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; }
#mplayer {
position: absolute;
display: grid;
place-items: end center;
gap: 10px 2px;
grid-template-areas: 'cur btnplay dur''prog prog prog' ;
font: normal 16px sans-serif;
z-index: 999;
--ww: 240px;
--color: snow;
--track: hsla(90,100%,95%,.65);
--prog: linear-gradient(90deg,hsla(90,30%,50%,.55),hsla(0,100%,50%,.75),hsla(180,100%,50%,.65));
}
#prog {
grid-area: prog;
position: relative;
width: 260px;
height: 4px;
background: var(--track);
display: grid;
place-items: center;
cursor: pointer;
}
#prog::before, #prog::after { position: absolute; content: ''; }
#prog::before {
height: 4px;
width: 50%;
left: 0;
background: var(--prog);
}
#prog::after {
left: calc(50% - 12px);
width: 16px;
height: 16px;
background: radial-gradient(transparent 2px, var(--color) 0, black);
border-radius: 4px;
}
#btnplay {
--dis1: block;
--dis2: none;
grid-area: btnplay;
width: 40px;
height: 40px;
border: 3px solid var(--color);
border-radius: 50%;
opacity: .95;
cursor: pointer;
transition: .3s;
position: relative;
}
#btnplay:hover { opacity: 1; box-shadow: 0 0 5px var(--color), inset 0 0 5px var(--color); }
#btnplay::before, #btnplay::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: var(--color);
}
#btnplay::before {
display: var(--dis1);
clip-path: polygon(35% 30%, 75% 50%, 35% 70%);
}
#btnplay::after {
display: var(--dis2);
clip-path: polygon(35% 30%, 45% 30%, 45% 70%, 35% 70%, 55% 70%, 65% 70%, 65% 30%, 55% 30%, 55% 70%, 45% 70%, 35% 70%);
}
#cur { grid-area: cur; color: var(--color); }
#dur { grid-area: dur; color: var(--color); }
</style>
<div id="papa">
<div id="mplayer">
<div id="prog"></div>
<div id="btnplay"></div>
<div id="cur">00:00</div>
<div id="dur">00:01</div>
</div>
</div>
<script>
let btnFlag = false;
btnplay.onclick = () => {
btnFlag ? (btnplay.style.setProperty('--dis1','block'),btnplay.style.setProperty('--dis2','none')) : (btnplay.style.setProperty('--dis1','none'),btnplay.style.setProperty('--dis2','block'));
btnFlag = !btnFlag;
}
</script>
黑黑又有新教程出来了{:4_199:} 新的知识点出来，老的还没有学会，赤脚跑也是危险了，跟不上了{:4_198:} 很漂亮，黑黑厉害{:4_187:} 小辣椒 发表于 2022-11-23 21:01
黑黑又有新教程出来了
路径点多，看了会晕人{:4_170:} 红影 发表于 2022-11-23 21:26
很漂亮，黑黑厉害
谢花 小辣椒 发表于 2022-11-23 21:04
新的知识点出来，老的还没有学会，赤脚跑也是危险了，跟不上了
知识极可能是环环相扣，前后联系的东东，断了节点不好掌握 马黑黑 发表于 2022-11-23 21:49
知识极可能是环环相扣，前后联系的东东，断了节点不好掌握
是的，所以一节没有掌握后面就会跟不上了 马黑黑 发表于 2022-11-23 21:48
路径点多，看了会晕人
后面就跟黑黑的套用 俺看不懂{:4_203:} 小辣椒 发表于 2022-11-23 21:52
后面就跟黑黑的套用
反正就是音乐播放用到，到时我会封装成插件 千羽 发表于 2022-11-23 21:53
俺看不懂
{:4_190:} 小辣椒 发表于 2022-11-23 21:51
是的，所以一节没有掌握后面就会跟不上了
对的，学习的连贯性非常重要 马黑黑 发表于 2022-11-23 21:54
对的，学习的连贯性非常重要
我早就感觉我跟不上了，但我学一点是一点 小辣椒 发表于 2022-11-23 22:02
我早就感觉我跟不上了，但我学一点是一点
你有一定的基础。有些我介绍的，一时半会不知道也没关系，使用几次，你就会明白 马黑黑 发表于 2022-11-23 22:27
你有一定的基础。有些我介绍的，一时半会不知道也没关系，使用几次，你就会明白
我套用几次就会有点感觉，这次做阳光的生日贺帖，我把你那个闪星加进去，结果没有效果出来，后来看了红影的那个帖明白底色有关系，下次还重新做一次 马黑黑 发表于 2022-11-23 21:49
知识极可能是环环相扣，前后联系的东东，断了节点不好掌握
老师，我只能仿照、套用你的代码，要全部学会你所授的那么多知识是不可能的，一是没基础学不会，二是年纪老了记不住。但因为喜欢代码制作音画，所以就是学不会、记不住也坚持天天上网学……快乐就在学习制作的过程中……{:5_106:} 寒冬残荷 发表于 2022-11-23 22:35
老师，我只能仿照、套用你的代码，要全部学会你所授的那么多知识是不可能的，一是没基础学不会，二是年纪 ...
没关系的，以快乐为要