Preciso fazer elementos com cantos cortados, igual a esses quadrados. Como posso fazer ?
3 Respostas
Como você não quer uma borda arredondada, acredito que não poderá usar um border-radius.
para simular o "corte" na div, você vai precisar de uma div interna possicionada na posição do "corte". então você irá colorir metade desta div com a cor da div externa e a outra metade com a cor externa.
No exemplo abaixo estou assumindo que a cor interna é amarelo e a externa é preto.
body {
background-color: black;
}
.panel {
height: 120px;
background: yellow;
}
.cut {
position: relative;
top: 0;
left: 0;
border-bottom: 40px solid yellow;
border-left: 40px solid black;
width: 0;
}
<div class="panel">
<div class="cut"></div>
</div>
Outra forma de fazer é usando o pseudo elemento ::after
Veja o exemplo abaixo:
.corner {
width: 200px;
height: 100px;
background-color: red;
position: relative;
overflow: hidden;
}
.corner::after {
content: "";
position: absolute;
z-index: 2;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
transform: rotate(45deg);
background-color: #fff;
}
<div class="corner"></div>
Nesse exemplo usando os atributos top: -15px; right: -15px; width: 30px; height: 30px;
vc pode controlar o tamanho do "corte" no canto da div.
Não sei se vai te ajudar, mas no canto onde fica o corte, experimente colocar uma div com um css semelhante ao seguinte:
.divCorte{
width:0;
height:0;
border-bottom:120px solid #666;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
transform: rotate(45deg);
}
Alinhe ela no canto da div que ficará externamente (com float+margin ou position). Caso o fundo seja uma imagem, tente usar o atributo css "border-image" para simular a transparência. Lembrando que isso é CSS3, em navegadores antigos não vai funcionar bem, precisa fazer alguma compatibilização.