Início / coding / Perguntas / 77745105
Accepted
Morton
Asked: 2024-01-02 17:14:50 +0800 CST

Como adicionar outra cor de posição personalizada ao triângulo css?

  • 772

Como adicionar a barra verde dentro do triângulo como esta foto? insira a descrição da imagem aqui

Tentei adicionar um triângulo css, mas não tenho ideia de como escrever a barra verde no triângulo css.

arquivo css:

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

código de disposição:

<div className={styles.triangle} />
css

2 respostas

  1. Best Answer

    Se você está procurando uma solução CSS, poderá brincar com vários triângulos aqui e obter os resultados desejados.

    Algo assim:

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

    • 4

  2. Não brinque com fronteiras, considere a abordagem moderna mais fácil de ajustar

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

    • 0

relate perguntas