skip to Main Content

How to add the green bar inside the triangle just like this photo ?
enter image description here

I have try to add a triangle css, but I have no idea how to write the green bar into the triangle css.

css file:

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 210px 100vw;
    border-color: transparent transparent #1a202c;
}

layout code:

<div className={styles.triangle} />

2

Answers


  1. If you are looking for CSS solution, you may be able to play around with multiple triangles here and get the desired results.

    Something like this:

    .triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 210px 100vw;
        border-color: transparent transparent #1a202c;
    }
    
    .triangle::before {
        position: relative;
        left: -50vw;
        top: -19px;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 105px 50vw;
        border-color: transparent transparent #83e5da;
    }
    
    
    .triangle::after {
        position: relative;
        left: -100vw;
        top: -16px;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 105px 50vw;
        border-color: transparent transparent #1a202c;
    }
    <div class="triangle">  
    
    </div>
    Login or Signup to reply.
  2. Don’t play with border, consider modern approach easier to adjust

    .box {
      /* triangle size */
      width: 100%;
      height: 50vh;
      /* */
      background: 
       linear-gradient(lightblue /* line color*/ 0 0) no-repeat
        right/40%, /* 40% = line length */
       #000; /* background color */
      clip-path: polygon(100% 0,100% 100%,0 100%);
      display: grid;
      overflow: hidden;
    }
    .box::before {
      content:"";
      clip-path: inherit;
      background-color: inherit;
      translate: 30px; /* the line thickness */
    }
    
    
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: end;
    }
    <div class="box"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search