6

inserir a descrição da imagem aqui

Preciso fazer elementos com cantos cortados, igual a esses quadrados. Como posso fazer ?

3 Respostas 3

3

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>

1
2

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.

0

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.

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 .