CSS 图标故障？

Question

我目前正在尝试编写一个扬声器图标的代码，我快完成了，但是扬声器的内圈出现了故障，但它在 CSSBattle 网站上工作，我无法修复它 now.Every 圆圈工作正常但只有第一个以某种方式卡住..我真的很感激一些帮助。我无法解决它...这是代码：

 body {
            background-color: #191919;
            width: 400px;
            height: 300px;
        }
        
        .speaker-triangle {
          margin-top: 13%;
          margin-left: 2%;
          height: 0px;
          width: 0px;
          border-top: 100px solid #191919;
          border-bottom: 100px solid #191919;
          border-left: 90px solid #191919;
          border-right: 90px solid #5DBCF9;
      }
          
        .speaker-holder {
          background-color: #5DBCF9;
          width: 60px;
          height: 50px;
          margin-top: -126px;
          margin-left: 68px;
          border-top-left-radius: 9px;
          border-bottom-left-radius: 9px;
        }
       
        .inner-circle {
          position: absolute;
          background-color: #191919;
          height: 80;
          width: 40;
          border-top-right-radius: 110px;
          border-bottom-right-radius: 110px;
          margin-top: -80px;
          margin-left: 215px;
          border: 10px solid #5DBCF9;
          border-left: #191919;
        }
        
         .middle-circle {
          position: absolute;
          background-color: #19191;
          height: 130px;
          width: 65px;
          border-top-right-radius: 110px;
          border-bottom-right-radius: 110px;
          margin-top: -104px;
          margin-left: 215px;
          border: 10px solid #5DBCF9;
          border-left: #191919;
        }
        
         .outer-circle {
          position: absolute;
          background-color: #19191;
          height: 180px;
          width: 90px;
          border-top-right-radius: 110px;
          border-bottom-right-radius: 110px;
          margin-top: -128px;
          margin-left: 215px;
          border: 10px solid #5DBCF9;
          border-left: #191919;
        }

  <div class="speaker-triangle"></div>
    <div class="speaker-holder"></div>
    <div class="inner-circle"></div>
    <div class="middle-circle"></div>
    <div class="outer-circle"></div>

Answer 1

你没有设置高宽后的长度单位.inner-circle 你有：

height: 80;
width: 40;

正确的是：

height: 80px;
width: 40px;

您可以使用所有浏览器都具有的检查元素功能来识别此类错误。正确的完整示例是：

body {
  background-color: #191919;
  width: 400px;
  height: 300px;
}

.speaker-triangle {
  margin-top: 13%;
  margin-left: 2%;
  height: 0px;
  width: 0px;
  border-top: 100px solid #191919;
  border-bottom: 100px solid #191919;
  border-left: 90px solid #191919;
  border-right: 90px solid #5dbcf9;
}

.speaker-holder {
  background-color: #5dbcf9;
  width: 60px;
  height: 50px;
  margin-top: -126px;
  margin-left: 68px;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
}

.inner-circle {
  position: absolute;
  background-color: #191919;
  height: 80px;
  width: 40px;
  border-top-right-radius: 110px;
  border-bottom-right-radius: 110px;
  margin-top: -80px;
  margin-left: 215px;
  border: 10px solid #5dbcf9;
  border-left: #191919;
}

.middle-circle {
  position: absolute;
  background-color: #19191;
  height: 130px;
  width: 65px;
  border-top-right-radius: 110px;
  border-bottom-right-radius: 110px;
  margin-top: -104px;
  margin-left: 215px;
  border: 10px solid #5dbcf9;
  border-left: #191919;
}

.outer-circle {
  position: absolute;
  background-color: #19191;
  height: 180px;
  width: 90px;
  border-top-right-radius: 110px;
  border-bottom-right-radius: 110px;
  margin-top: -128px;
  margin-left: 215px;
  border: 10px solid #5dbcf9;
  border-left: #191919;
}

  <div class="speaker-triangle"></div>
  <div class="speaker-holder"></div>
  <div class="inner-circle"></div>
  <div class="middle-circle"></div>
  <div class="outer-circle"></div>

CSS 图标故障？

CSS icon glitch?

html

css

margin