HTML5 音频元素样式怪异答案

【问题标题】：HTML5 Audio Element styling weirdnessHTML5 音频元素样式怪异
【发布时间】：2020-06-04 23:30:55
【问题描述】：

我目前正在开发一个以 Windows98 为主题的商店网站，我需要在产品页面上显示音频预览。到目前为止，我的 HTML5 音频 CSS 如下所示：

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
    -webkit-transform: translateZ(0) !important;
    -webkit-appearance:none;
    background-color: silver;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    width: 100%;
}

audio {
    -webkit-transform: translateZ(0) !important;
    -webkit-appearance:none;
    background-color: silver;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    width: 100%;
}

这实现了这一点： https://i.imgur.com/AgkZU6u.png
虽然效果很好，但音频元素的边缘有奇怪的轮廓，我不知道如何删除它们（看看播放器的最右边和最左边，它们相当微弱）。我也不相信使用凌乱的 JS 是必要的，但有什么方法可以掩盖它，因为它看起来很糟糕。
谢谢。

【问题讨论】：

标签： html css audio

【解决方案1】：

抱歉，找到了解决办法。我用过

clip-path: polygon(50% 0%, 96% 5%, 100% 43%, 98% 79%, 96% 100%, 4% 100%, 2% 77%, 0% 43%, 3% 3%);

在style 标签上，这似乎有效。（确保它在样式元素上，否则它将不起作用）无论如何这是我的解决方案，如果您有更好的解决方案，请告诉我。

【讨论】：