-2

inserir a descrição da imagem aqui

Ficaria desta forma acima. Se alguém poder ajudar.

<style>
    .cont{
        width: 250px;
        height: 150px;
        border: 1px solid rgb(121, 121, 121);
    }
    .inf{
        background-color:rgb(73, 73, 73);
        margin: 2%;
        height: 140px;
    }
    .diagonal{
        background-color: rgb(5, 160, 13);
        position: fixed;
    }
</style>

<div class="cont">
    <div class="diagonal">1/70</div>
    <div class="inf">
        
    </div>
</div>

1 Resposta 1

-2

Para poder rotacionar um objeto no css use o

transforme: rotate(Xdeg)

E para os cantos poderem ficar nessa forma triangular pode se usar o after e o before, primeiro só precisa fazer com que as medidas que nele serão usadas se tornem relativas à div original, depois basta mexer nas medidas que precisar

<style>
    .cont{
        width: 250px;
        height: 150px;
        border: 1px solid rgb(121, 121, 121);
    }
    .inf{
        background-color:rgb(73, 73, 73);
        margin: 2%;
        height: 140px;
    }
    .diagonal{
        background-color: rgb(5, 160, 13);
        position: fixed;
        top: 15px;
        transform: rotate(-45deg);
    }
    .diagonal::before, .diagonal::after{
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
    }
    .diagonal::before {
        top: 0;
        left: -20px;
        border-width: 0 0 18.2px 20px; /* Triângulo esquerdo */
        border-color: transparent transparent rgb(5, 160, 13) transparent;
        transform: rotate(90deg);
        transform: scaleX(1);
    }
    .diagonal::after {
        top: 0;
        left: 28.3px;
        border-width: 0 0 18.2px 20px; /* Triângulo direito */
        border-color: transparent transparent rgb(5, 160, 13);
        transform: rotate(90deg);
        transform: scaleX(-1);
    }
    </style>
1
  • 1
    Vlw, vc e o cara! Commented 16/07 às 19:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .