Skip to main content
adicionou 2 caracteres ao conteúdo
Fonte Link
Dexxtz
  • 609
  • 3
  • 15

Precisava reproduzir a imagem em css, ja testei algumas opções do transform e não consigo esticar uma das pontas.

inserir a descrição da imagem aqui

Minha dúvida é como pegar a parte inferior da esquerda e fazer ela ser maior no sentido pra baixo que a da direita.

BaixoA baixo fiz em css com after e before não fica bom eu queria apenas ter um quadrado e esticar uma das pontas, deve ter alguma maneira por css

<html>
<body>
    <style>
        div { width: 320px; height: 335px; border: 1px solid blue; border-radius: 10px 10px 10px 0; position: relative; }
        div:before { content: ''; border-right: 318px solid transparent; border-top: 100px solid blue; position: absolute; bottom: -99px; left: -1px; }
        div:after { content: ''; border-right: 318px solid transparent; border-top: 100px solid white; position: absolute; bottom: -98px; }     
    </style>
    <div>

    </div>
</body>
</html>

Precisava reproduzir a imagem em css, ja testei algumas opções do transform e não consigo esticar uma das pontas.

inserir a descrição da imagem aqui

Minha dúvida é como pegar a parte inferior da esquerda e fazer ela ser maior no sentido pra baixo que a da direita.

Baixo fiz em css com after e before não fica bom eu queria apenas ter um quadrado e esticar uma das pontas, deve ter alguma maneira por css

<html>
<body>
    <style>
        div { width: 320px; height: 335px; border: 1px solid blue; border-radius: 10px 10px 10px 0; position: relative; }
        div:before { content: ''; border-right: 318px solid transparent; border-top: 100px solid blue; position: absolute; bottom: -99px; left: -1px; }
        div:after { content: ''; border-right: 318px solid transparent; border-top: 100px solid white; position: absolute; bottom: -98px; }     
    </style>
    <div>

    </div>
</body>
</html>

Precisava reproduzir a imagem em css, ja testei algumas opções do transform e não consigo esticar uma das pontas.

inserir a descrição da imagem aqui

Minha dúvida é como pegar a parte inferior da esquerda e fazer ela ser maior no sentido pra baixo que a da direita.

A baixo fiz em css com after e before não fica bom eu queria apenas ter um quadrado e esticar uma das pontas, deve ter alguma maneira por css

<html>
<body>
    <style>
        div { width: 320px; height: 335px; border: 1px solid blue; border-radius: 10px 10px 10px 0; position: relative; }
        div:before { content: ''; border-right: 318px solid transparent; border-top: 100px solid blue; position: absolute; bottom: -99px; left: -1px; }
        div:after { content: ''; border-right: 318px solid transparent; border-top: 100px solid white; position: absolute; bottom: -98px; }     
    </style>
    <div>

    </div>
</body>
</html>
adicionou 668 caracteres ao conteúdo
Fonte Link
Dexxtz
  • 609
  • 3
  • 15

Precisava reproduzir a imagem em css, ja testei algumas opções do transform e não consigo esticar uma das pontas.

inserir a descrição da imagem aqui

Minha dúvida é como pegar a parte inferior da esquerda e fazer ela ser maior no sentido pra baixo que a da direita.

Baixo fiz em css com after e before não fica bom eu queria apenas ter um quadrado e esticar uma das pontas, deve ter alguma maneira por css

<html>
<body>
    <style>
        div { width: 320px; height: 335px; border: 1px solid blue; border-radius: 10px 10px 10px 0; position: relative; }
        div:before { content: ''; border-right: 318px solid transparent; border-top: 100px solid blue; position: absolute; bottom: -99px; left: -1px; }
        div:after { content: ''; border-right: 318px solid transparent; border-top: 100px solid white; position: absolute; bottom: -98px; }     
    </style>
    <div>

    </div>
</body>
</html>

Precisava reproduzir a imagem em css, ja testei algumas opções do transform e não consigo esticar uma das pontas.

inserir a descrição da imagem aqui

Minha dúvida é como pegar a parte inferior da esquerda e fazer ela ser maior no sentido pra baixo que a da direita.

Precisava reproduzir a imagem em css, ja testei algumas opções do transform e não consigo esticar uma das pontas.

inserir a descrição da imagem aqui

Minha dúvida é como pegar a parte inferior da esquerda e fazer ela ser maior no sentido pra baixo que a da direita.

Baixo fiz em css com after e before não fica bom eu queria apenas ter um quadrado e esticar uma das pontas, deve ter alguma maneira por css

<html>
<body>
    <style>
        div { width: 320px; height: 335px; border: 1px solid blue; border-radius: 10px 10px 10px 0; position: relative; }
        div:before { content: ''; border-right: 318px solid transparent; border-top: 100px solid blue; position: absolute; bottom: -99px; left: -1px; }
        div:after { content: ''; border-right: 318px solid transparent; border-top: 100px solid white; position: absolute; bottom: -98px; }     
    </style>
    <div>

    </div>
</body>
</html>
Fonte Link
Dexxtz
  • 609
  • 3
  • 15

Forma geometrica com css

Precisava reproduzir a imagem em css, ja testei algumas opções do transform e não consigo esticar uma das pontas.

inserir a descrição da imagem aqui

Minha dúvida é como pegar a parte inferior da esquerda e fazer ela ser maior no sentido pra baixo que a da direita.