css制作小喇叭

CSS 制作小喇叭

通过CSS可以绘制一个简单的小喇叭图标，主要利用边框和伪元素实现。以下是两种常见方法：

方法一：利用边框和旋转

<div class="speaker"></div>

.speaker {
    width: 30px;
    height: 30px;
    position: relative;
    background: #333;
    border-radius: 30%;
}

.speaker::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 15px;
    background: #fff;
    top: 8px;
    left: 5px;
}

.speaker::after {
    content: "";
    position: absolute;
    border: 10px solid transparent;
    border-left: 15px solid #333;
    top: 5px;
    left: 18px;
}

效果说明：主体通过 border-radius 实现圆角矩形，伪元素 ::before 绘制喇叭的竖线，::after 通过边框技巧生成三角形。

方法二：纯边框实现

<div class="speaker-icon"></div>

.speaker-icon {
    width: 0;
    height: 0;
    border-left: 15px solid #333;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: relative;
}

.speaker-icon::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 15px;
    background: #333;
    left: -20px;
    top: -7px;
}

.speaker-icon::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background: #333;
    border-radius: 50%;
    left: -25px;
    top: 0;
}

效果说明：主体通过三角形边框模拟喇叭扩散部分，伪元素 ::before 绘制把手，::after 添加圆形装饰。

自定义调整建议

• 修改 width、height 和颜色值可调整大小和配色。
• 添加 transform: rotate() 可改变方向。
• 结合动画（如 @keyframes）可实现声波动画效果。