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

Respostas:

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