css Question posted in
Some basic documentation can be found here.

How to add another custom position color into triangle css?

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} />
Tags:

2

Answers


  1. 0

    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. 0

    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