Efeito polígono (sem máscara)

Ohayou, minna-san!

Após tanto tempo sem dar sinais de vida, finalmente trago tutoriais novinhos em folha, muitos deles em uso no meu novo layou de natal do FS (www). Este em particular é chamado, de uma maneira geral, "polygon", e vi-o pela primeira vez num tumblr, só mais tarde me lembrando de tentar passá-lo para o blogger. Peguei os códigos, só ajustando um pouco, aqui: www. É realmente fácil de fazer, e por ordem, os códigos que vou fornecer permitem colocar a imagem com 5, 6, 7, 8 e 9 pontas. OH, e eu vou ensinar apenas por html, não com máscara, ao contrário de {aqui} ou {aqui}. Espero que gostem:

Prévia: www

Tutorial

Procure por:

/b:skin

Acima, adicione um dos seguintes código, conforme o número de pontas que quiser, e ajeite a largura e espaçamentos.

.penta {

width: 100px;

margin: 5px 5px 5px 5px;

-webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);

-moz-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);

-ms-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);

-o-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);

clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);

}

.hexa {

width: 100px;

margin: 5px 5px 5px 5px;

-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

-moz-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

-ms-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

-o-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

}

.hepta {

width: 100px;

margin: 5px 5px 5px 5px;

-webkit-clip-path: polygon(50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%);

-moz-clip-path: polygon(50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%);

-ms-clip-path: polygon(50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%);

-o-clip-path: polygon(50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%);

clip-path: polygon(50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%);

}

.octa {

width: 100px;

margin: 5px 5px 5px 5px;

-webkit-clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);

-moz-clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);

-ms-clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);

-o-clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);

clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);

}

.nona {

width: 100px;

margin: 5px 5px 5px 5px;

-webkit-clip-path: polygon(50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);

-moz-clip-path: polygon(50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);

-ms-clip-path: polygon(50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);

-o-clip-path: polygon(50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);

clip-path: polygon(50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);

}

Para adicionar o efeito, basta ir a esquema» adicionar um gadget HTML/Javascript» colar o seguinte código:

<img src="url-da-imagem" class="EFEITO" />

Onde diz efeito, substitua pelo nome do efeito do código que escolheu. Por exemplo, se escolheu a primeira caixinha, então substitua as letras maiúsculas por penta.