Como posso fazer as formas geométricas abaixo utilizando preferencialmente CSS? Caso não seja possível fazer utilizando somente CSS também aceito respostas com outros métodos.
6 Respostas
De maneira mais simples e mais parecido com sua imagem:
.trapezio {
border-bottom: 70px solid #c1c1c1;
border-left: 30px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 120px;
}
.trapezioinvertido {
border-top: 70px solid #c1c1c1;
border-left: 30px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 120px;
}
.paralelograma {
width: 150px;
height: 70px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
background: #c1c1c1;
}
<html>
<head>
<title></title>
</head>
<body>
<div class="trapezio"></div>
</br>
<div class="paralelograma"></div>
</br>
<div class="paralelograma"></div>
</br>
<div class="trapezioinvertido"></div>
</body>
</html>
-
Nossa, David, simplesmente perfeito! Muito obrigado pela ajuda, foi de grande utilidade! Commented 24/11/2015 às 17:06
-
Posso ter repetido código do trapézio, mas acredito que dessa forma fique mais claro para entender como funciona as formas :)– DavidCommented 24/11/2015 às 17:09
-
-
Uma dúvida David, isso você também faz na raça ou existe algum gerador? Quando preciso dessas formas eu recorro a uma biblioteca própria que armazenei algumas, mas foi difícil fazer manual.– user35937Commented 24/11/2015 às 17:11
-
1certo @David, aqui está: pt.stackoverflow.com/questions/100126/… Commented 24/11/2015 às 17:33
Use transform: rotate
nos elementos filhos, e perspective
, no elemento pais.
.a{
perspective:1000px;
text-align:center;
}
.b{
transform:rotateX(-60deg);
width:100px;
background:gold;
height:100px;
}
.c{
transform:rotateX(30deg);
width:100px;
background:tomato;
height:100px;
}
.d{
transform:rotateY(30deg);
width:100px;
background:lightgreen;
height:100px;
}
<div class="a">
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</div>
TL;DR
A propriedade perspective
afeta apenas os elementos filhos de onde foi definida essa propriedade, porém não afeta ela mesma.
Como funciona a propriedade perspective
?
Esta propriedade permite-lhe mudar a perspectiva em que os elementos 3D são vistos. A propriedade perspective determina a distância entre o plano Z
e o usuário, a fim de dar ao elemento 3D alguma perspectiva.
A intensidade do efeito é determinado pelo valor de perspective
. Quanto menor o valor, mais próximo você começa a partir do plano Z. Quanto maior for o valor, mais subtil será o efeito.
Ao definir a propriedade perspective
em um elemento, são os elementos filhos que recebem a perspectiva em que é vista, não o próprio elemento.
Nota: A propriedade perspectiva afeta apenas os elementos transformados em 3D!
Referências (de onde fiz uma tradução meia-boca):
http://www.w3schools.com/cssref/trycss3_perspective_inuse.htm
https://developer.mozilla.org/pt-BR/docs/Web/CSS/perspective
-
2Como funciona o
perspective
? Os1000px
querem dizer o quê? Que o ponto de fuga está a 1000px de distância? Commented 24/11/2015 às 16:43 -
@bfavaretto, se puder complementar a resposta, vai me ajudar. Essa é uma das coisas que sei que funciona, mas não sei explicar por que funciona. Estou sendo sincero com você. Commented 24/11/2015 às 16:43
-
Eu também não sei :P Mas se eu descobrir, eu complemento. Commented 24/11/2015 às 16:44
-
@bfavaretto, eu sei que o tamanho da perspectiva influencia na forma com que vai ser rotacionado o objeto. Commented 24/11/2015 às 16:44
Existem algumas formas de fazer isso. Irei adicionar algumas das formas que você pediu aqui.
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
<div id="trapezoid">Trapezoide</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="parallelogram">Paralelogram</div>
O restante basta você alterar as propriedades da forma que desejar.
Neste Site possui vários exemplos de formas geométricas.
-
-
2@WallaceMaxters Estou um pouquinho ocupado agora, depois eu explico com calma as propriedades, para melhor entendimento do AP.– RandradeCommented 24/11/2015 às 16:41
Use polygon
:
svg polygon { fill: #666 }
<svg width='200' height='100'>
<polygon points='0,100 50,0 150,0 200,100'/>
</svg>
<svg width='200' height='100'>
<polygon points='0,100 50,0 200,0 150,100'/>
</svg>
<svg width='200' height='100'>
<polygon points='50,100 0,0 200,0 150,100'/>
</svg>
-
-
Tem várias formas, mas aí já trata-se de outra pergunta. Commented 24/11/2015 às 17:26
-
1@renan, acredito que com polygon é a maneira mais sensata de fazer. Não aprovo muito a questão de utilizar Skew e Border, pois o primeiro destorce e o segundo dificulta o posicionamento de elementos internos. +1. Commented 24/11/2015 às 17:54
-
2@DorivalZanetto A segunda é horrível, a primeira ainda dá pra criar um elemento dentro e aplicar um skew com valor negativo para corrigir o texto. Mas me parece gambiarra :P Commented 24/11/2015 às 18:52
Utilizando APENAS css, isto é o máximo que você vai conseguir: http://jsfiddle.net/8o4f01pg/
A propriedade skew
é que irá 'distorcer' a div do modo como você deseja.
.skew{
transform:skew(40deg);
}
.skew p {
transform:skew(-40deg);
}
Note que é importante aplicar o valor de modo negativo para o child
dessa div, para que ele possa continuar 'normal'.
O problema do seu layout é que, além da distorção ela também possui altura e largura diferente em cada 'canto'.
O único modo de atingir esse resultado (até onde sei) seria através de um svg
.
Editado:
Utilizando o método SVG, que permite criar formas complexas.
Este exemplo de código irá gerar uma "div" com larguras e alturas aleatórias:
<div class="container">
<div class="col-lg-6">
<svg class="svg" viewBox="0 0 910 500" >
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="900" height="490">
<image xlink:href="http://www.thesaleslion.com/wp-content/uploads/2013/12/web-design.jpg" x="0" y="0" width="890" height="480" />
</pattern>
</defs>
<polygon points="96.729,27.124 10,470.109 867.032,420.878 890,10" fill="url(#img1)"/>
</svg>
</div>
</div>
No entanto, optei por não utilizar esse modelo pois ele se torna 'chato' de trabalhar no quesito manutenção. Cada "div" ou bloco, que você for gerar, deverá ser desenhado antes de passar para o html. Eu fiz através do illustrator, salvei em svg e peguei apenas o código que gerava a forma (foi mais fácil para mim, pois já envolvia outros serviços que necessitavam da mesma forma - podem haver métodos mais fáceis/simples).
O código que representa o formato da "div" seria esse:
<polygon points="96.729,27.124 10,470.109 867.032,420.878 890,10" fill="url(#img1)"/>
Onde também já possui uma imagem de fundo, referenciada dentro da tag pattern
.
Já o tamanho da "div" é gerenciada por aqui:
<svg class="svg" viewBox="0 0 910 500" >
Onde o viewbox determina o tamanho dela.
O código que lhe passei, já funciona de modo responsive
. Mas como dito antes, a manutenção desse modelo é bem complexo, se comparado à manutenção de uma div simples.
Veja um exemplo funcional aqui: http://jsfiddle.net/1rmd2otz/7/
-
Se não der pra fazer somente com CSS não tem problema também, como seria feito com svg? Commented 24/11/2015 às 16:47
-
1
É possível fazer também com Clip-Path!
Como não foi citado em nenhuma das outras respostas vou dar uma solução usandoclip-path:polygon
.trap, .skw, .skw-inc, .trap-inv {
width: 160px;
height: 80px;
background-color: #666;
margin: 1rem;
}
.trap {
-webkit-clip-path: polygon(20% 0%, 91% 0, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 91% 0, 100% 100%, 0% 100%);
}
.skw {
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.skw-inc {
-webkit-clip-path: polygon(25% 0%, 100% 0%, 89% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 89% 100%, 0% 100%);
}
.trap-inv {
-webkit-clip-path: polygon(0 0, 100% 0, 89% 100%, 23% 100%);
clip-path: polygon(0 0, 100% 0, 89% 100%, 23% 100%);
}
<div class="trap"></div>
<div class="skw"></div>
<div class="skw-inc"></div>
<div class="trap-inv"></div>
- Documentação oficial W3C do
clip-phat
https://www.w3.org/TR/css-masking-1/#the-clip-path
OBS!: Infelizmente ainda não funciona no IE ou EDGE, no entanto mais de 90% dos browsers pelo mundo já dão suporte ao clip-phat
https://caniuse.com/#feat=css-clip-path
rotateX
ourotateY
e, no elemento pai, vai setar a perspectiva.