用clip-path的polygon绘制暂停图标

马黑黑 · 发表于 2022-11-23 20:38

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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:40

本帖最后由马黑黑于 2022-11-23 20:42 编辑

00:00

00:01

马黑黑 · 发表于 2022-11-23 20:41

二楼代码：

<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>