Como desenhar uma estrela com CSS

Escrito por kevin foley | Traduzido por cezar rosa
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como desenhar uma estrela com CSS
Você pode criar uma forma de estrela com poucas linhas de código CSS (étoile à six branches image by dead_account from Fotolia.com)

Você pode desenhar uma estrela através do CSS (Cascading Style Sheet) com poucas linhas de código, em vez de utilizar uma imagem de estrela em uma página Web. O código em CSS carrega mais rápido do que uma imagem, o que melhora a experiência de usuário de seus visitantes. Também é muito simples modificar as cores e proporções de suas formas quando você usa CSS, já que elas não necessitam de um software para edição de imagem.

A estrela de seis pontas é a forma mais fácil de ser criada em CSS, pois é composta apenas por dois triângulos.

Nível de dificuldade:
Fácil

Outras pessoas estão lendo

O que você precisa?

  • Editor de texto simples

Lista completaMinimizar

Instruções

  1. 1

    Abra um documento em HTML.

  2. 2

    Insira o código a seguir na seção <head></head> de seu documento HTML:

    <style>

    </style>

  3. 3

    Crie um elemento chamado "triangulo-cima" dentro da seção <style></style> de seu documento HTML. Defina as propriedades de borda, largura e posição do elemento para criar um triângulo. Por exemplo, para criar um triângulo que tem 80 pixels de largura e 60 pixels de altura, insira o seguinte código:

    triangulo-cima {

    border-color: transparent transparent #000000 transparent; border-style: solid; border-width: 0px 40px 60px 40px; width: 0px; position: absolute; top: 0px; }

  4. 4

    Crie um elemento chamado "triangulo-baixo" dentro da seção <style></style> de seu documento HTML. O triângulo deve ser um espelho da figura do elemento "triangulo-cima". O código será como a seguir:

    triangulo-baixo {

    border-color: #000000 transparent transparent transparent; border-style: solid; border-width: 60px 40px 0px 40px; width: 0px; position: absolute; top: 35px; }

  5. 5

    Insira o código a seguir na seção <body></body> do documento HTML:

    <div id="triangulo-cima">   </div>

    <div id="triangulo-baixo">   </div>

  6. 6

    Salve seu documento HTML e o abra em seu navegador para visualizar o resultado final.

Dicas & Advertências

  • Você pode modificar a cor e o tamanho da estrela alterando as propriedades "border-color" e "border-size", respectivamento, no código CSS.
  • A versão 6 do Internet Explorer, assim como versões anteriores, não aceitam a propriedade de transparência.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível