1

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>

2 Respostas 2

3

Se SVG for uma opção, pode fazer da seguinte maneira:

<svg width="195" height="322" viewBox="0 0 195 322" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Vector</title>
<desc>SVG</desc>
<g id="Canvas" transform="translate(-117 121)">
<g id="Vector">
<use xlink:href="#path0_stroke" transform="translate(118 -120)"/>
</g>
</g>
<defs>
<path id="path0_stroke" d="M 177.435 276.505L 177.338 276.015L 177.327 276.017L 177.316 276.019L 177.435 276.505ZM 0 0.5L 174.323 0.5L 174.323 -0.5L 0 -0.5L 0 0.5ZM 174.323 0.5C 177.356 0.5 181.916 1.41225 185.704 4.13419C 189.467 6.83778 192.5 11.3478 192.5 18.6408L 193.5 18.6408C 193.5 11.0211 190.308 6.21076 186.288 3.32212C 182.293 0.45183 177.515 -0.5 174.323 -0.5L 174.323 0.5ZM 192.5 18.6408C 192.5 26.0971 192.5 86.6796 192.5 145.398C 192.5 174.757 192.5 203.65 192.5 225.204C 192.5 235.981 192.5 244.922 192.5 251.17C 192.5 254.294 192.5 256.744 192.5 258.413C 192.5 259.248 192.5 259.887 192.5 260.318C 192.5 260.533 192.5 260.697 192.5 260.806C 192.5 260.861 192.5 260.902 192.5 260.929C 192.5 260.943 192.5 260.954 192.5 260.96C 192.5 260.964 192.5 260.967 192.5 260.968C 192.5 260.97 192.5 260.971 193 260.971C 193.5 260.971 193.5 260.97 193.5 260.968C 193.5 260.967 193.5 260.964 193.5 260.96C 193.5 260.954 193.5 260.943 193.5 260.929C 193.5 260.902 193.5 260.861 193.5 260.806C 193.5 260.697 193.5 260.533 193.5 260.318C 193.5 259.887 193.5 259.248 193.5 258.413C 193.5 256.744 193.5 254.294 193.5 251.17C 193.5 244.922 193.5 235.981 193.5 225.204C 193.5 203.65 193.5 174.757 193.5 145.398C 193.5 86.6796 193.5 26.0971 193.5 18.6408L 192.5 18.6408ZM 193 260.971C 192.5 260.971 192.5 260.971 192.5 260.97C 192.5 260.97 192.5 260.97 192.5 260.97C 192.5 260.97 192.5 260.97 192.5 260.971C 192.5 260.972 192.5 260.973 192.5 260.975C 192.5 260.98 192.5 260.986 192.5 260.997C 192.499 261.018 192.498 261.048 192.497 261.091C 192.493 261.179 192.486 261.302 192.472 261.467C 192.442 261.805 192.385 262.275 192.267 262.863C 192.028 264.055 191.566 265.632 190.618 267.33C 188.743 270.698 184.975 274.49 177.338 276.015L 177.533 276.995C 185.461 275.413 189.475 271.438 191.491 267.816C 192.488 266.019 192.999 264.295 193.247 263.059C 193.372 262.434 193.436 261.909 193.468 261.555C 193.484 261.374 193.492 261.227 193.496 261.132C 193.498 261.082 193.499 261.042 193.499 261.017C 193.5 261.003 193.5 260.992 193.5 260.985C 193.5 260.981 193.5 260.978 193.5 260.976C 193.5 260.974 193.5 260.973 193.5 260.973C 193.5 260.972 193.5 260.972 193.5 260.972C 193.5 260.971 193.5 260.971 193 260.971ZM 177.316 276.019L -0.119042 319.514L 0.119042 320.486L 177.555 276.99L 177.316 276.019Z"/>
</defs>
</svg>

5
  • O problema é que tem que ser css por que vai ser responsivo de acordo com o conteúdo, serão vários, uns maiores outros menores de acordo com conteúdo, então teria q ser 1 div(after, before) ou 2 div, só que com 2 div rotacionando fazer a borda é complicado
    – Dexxtz
    1/12/2017 às 18:16
  • @Dexxtz os cantos podem ser retos ou tem que ser meio arredondado como no modelo?
    – hugocsl
    1/12/2017 às 18:20
  • tem que ser arredondados igual esta na imagem exemplo, realmente teria que ser css com os cantos arredondados e a parte de baixo maior que a da lateral
    – Dexxtz
    1/12/2017 às 18:23
  • SVG pode ser responsivo óras, fazer forma geométrica com border é gambiarra. @Dexxtz 1/12/2017 às 18:50
  • @Renan não sou eu que escolho, isso é testado ate em IE, varios devices que não interpreta svg, por isso tem que ser css =(
    – Dexxtz
    1/12/2017 às 19:06
1

Agora refiz o modelo apenas com CSS, o que vc tem que levar em consideração agora é o fator Crossbrowser. Pq o transform:skewY() pode ser tão problemático quanto o SVG no seu caso, pois os dois métodos só funcionam do ie9 para frente!

Consulte a compatibilidade com os browser nesses links https://caniuse.com/#feat=transforms2d https://caniuse.com/#feat=svg

Segue modelo em CSS

.container{
    position: relative;
    width: 300px;
    height: 360px;
    overflow: hidden;
}
.big{
    width: 300px;
    height: 312px;
    border: 1px solid navy;
    border-radius: 1rem;
    position: absolute;
    top: 0;
    left: -15px;
    background-color: #fff;
}
.small{
    width: 270px;
    height: 82px;
    border-bottom: 1px solid navy;
    position: absolute;
    bottom: 22px;
    left: 0px;
    transform: skewY(-10deg);
    background-color: #fff;
}
<div class="container">
    <div class="big"></div>
    <div class="small"></div>
</div> 

OBS: Pode ser que vc tenha que fazer ajustes finos no height e bottom da classe "small" para ficar perfeito. Aqui mesmo no componente de código das resposta do Stackoverflow já ficou diferente do meu Chrome e tive que ajustar.

Agora fica a seu critério explicar para o cliente se é melhor optar por SVG ou Transforme sendo que os dois só são compatíveis do ie9 para frente.

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 .