Como posso criar essa borda de forma irregular com CSS puro (sem imagens)?

12

Estou tentando evitar o uso de uma imagem de plano de fundo (ou qualquer solução baseada em imagem) para criar efetivamente isso:

fronteira irregular

Nota: a seta vermelha está apenas apontando para a borda em questão. A seta não deve ser incluída na sua resposta.

Como posso criar essa borda de forma irregular com CSS puro (sem imagens)? Se as imagens forem inevitáveis, a resposta mais concisa e legível será votada e aceita.

css borders

— Micah Bolen
fonte

12

Você pode usar CSS (tendo em mente que isso não funcionará com versões mais antigas do IE).

Por exemplo, você pode combinar algumas formas, como um retângulo e dois triângulos. Veja este jsfiddle .

insira a descrição da imagem aqui

HTML:

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

E o CSS:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

Você pode ver uma variedade de formas CSS aqui . A maioria, se não todos, exige mais de uma div, portanto o desafio seria aplicar uma borda mais escura.

— Yisela
fonte

Existe uma maneira de fazer isso onde o polígono usa uma largura baseada em porcentagem?

— Micah Bolen

Usando a abordagem de Yisela, você pode fazer o triângulo com uma div (borda esquerda e borda direita com 1/2 da largura do quadrado; a borda superior = altura desejada; e adicionar uma margem superior de (-1 * borda superior) . Você precisa adicionar valor de preenchimento para a praça para impedir que o texto de lapidação do triângulo.

— Horatio

2

Você pode colocar essas formas adicionais em pseudoelementos :beforee :aftermanter o seu html'limpo'. O :beforeseria o triângulo esquerdo, :aftero direito.

— Vincent

7

A resposta de Yisela é sólida, mas achei que ofereceria essa alternativa: usar polígono ou um URI de imagem com formas CSS e caminho de clipe. Aqui está um tutorial rápido .

Observe que esse método funcionará com menos navegadores do que o truque de borda do triângulo no momento. No entanto, se você quiser usar uma forma mais complexa ou enquadrar seu texto na forma, esse será o caminho a seguir.

demo-screenshot

— Joey Cordes
fonte

Parece que essa solução funcionaria se eu precisasse do polígono para usar uma largura baseada em porcentagem. Talvez, por meio da vwunidade CSS . Isso parece possível?

— Micah Bolen

2

Outro método para isso que também pode ter suporte limitado é o "SVG incorporado no CSS". Eu não tentei isso sozinho, mas a idéia é que você forneça um recurso de imagem como um URL na declaração css para o objeto e passe um URL com escape adequado que contém os dados.

SVG é um formato de texto simples / xml. Um polígono de exemplo (da w3schools ):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

Um exemplo de SVG embutido (incorporado) (simplificado) (do stackoverflow ):

url("data:image/svg+xml;utf8, <svg></svg>");

Observe que os dados SVG devem ser "escapados" corretamente para uso em linha, o que o torna um pouco menos atraente do que simplesmente vincular um arquivo SVG.

Há alguma discussão sobre a viabilidade do método no thread vinculado acima. Penso que incorporar algo tão simples como um triângulo branco é uma decisão fácil, desde que o suporte esteja lá. Dados complexos no formato SVG devem ser armazenados como um arquivo SVG em vez de embutidos.

Os arquivos SVG são vetoriais e podem ser redimensionados em porcentagem, diferentemente do método "bordas". Eles também (atualmente) têm suporte melhor (pelo menos não interno) do que o método do caminho de recorte listado. SVG, sendo texto simples, pode até ser emitido on-the-fly usando, por exemplo, PHP ou outro script do lado do servidor.

— horatio
fonte

0

Se sua área azul na imagem é um png transparente e a área branca é transparente, você deve incluir este html para fazer sombras:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

E use este css na imagem:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

Esta é uma solução perfeitamente entre navegadores.

— bogatyrjov
fonte