How do we proceed with such a horizontal line?



  • Please indicate how to implement such a horizontal line: введите сюда описание изображения

    Here's my code:

    * {
      margin: 0;
      padding: 0;
    }
    .line {
      height: 40px;
      width: 100%;
      position: relative;
      display: flex;
    }
    

    .line-left {
    width: 80%;
    height: 40px;
    background: red;
    }

    .line-right {
    width: 20%;
    height: 40px;
    background: black;
    }

    .line-right:before {
    content: '';
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-right: 140px solid green;
    border-bottom: 40px solid transparent;
    }

    <div class="line">
    <div class="line-left">

    </div>
    <div class="line-right">

    </div>
    </div>



  • That's the best.

    .gradient {
      height: 20px;
      background: linear-gradient(115deg, hsl(30, 85%, 70%) 70%, hsl(0, 0%, 57%) 71%);
    }
    <div class="gradient"></div>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2