Fylo data storage component challenge . Using just html and Css

Community feedback

• 

  tomas938•385

  @tomas938Posted about 3 years ago

  <div id="bottom">
          <p class="storage">You’ve used <span>815 GB</span> of your storage</p>
  <div class="data">
            <div class="layover">
              <h1>185</h1>
              <span>GB LEFT</span>
              <div class="triangle"></div>
            </div>
            <div class="full-bar">
              <div id="bar">
                <div id="circle"></div>
              </div>
            </div>
            <div class="para">
              <p>0 GB</p>
              <p>1000 GB</p>
            </div>
          </div>
        </div>
    .layover {
      position: relative;
      transform: translateY(-100px) translateX(325px);
    }
    .triangle {
      height: 50px;
      width: 50px;
      position: absolute;
      top: 90%;
      right: 0;
      border-right: 50px solid white;
      border-bottom: 50px solid transparent;
    }
  

  this should help little bit

  Marked as helpful

  0
• 

  tomas938•385

  @tomas938Posted about 3 years ago

  Hi, you need put your triangle in your layover div and give it position relative and then absolutly position triangle with top,left,right,bottom values as u need .

  Marked as helpful

  0

  ---

  

  tosho•80

  @Tosho4realPosted about 3 years ago

  @tomas938 its still the same behaviour

  0