Efeito polígono (sem máscara)

Yo queridos! Hoje venho trazer o famoso efeito polígono, geralmente é necessário uma mascara para dar forma, mas com esse modo é possível fazer sem a mascara o que é bem pratico. Ah! É possível ver o efeito no link abaixo, espero que gostem. 

Brevia do efeito

1. Vejo os exemplos de efeito polígono na brevia, e escolha um dos modelos. Vá até o HTML e ative a pesquisa pressionando Ctrl+F e procure por ]]></b:skin>, de acordo com qual modelo escolheu copie o código abaixo e cole acima de ]]></b:skin>.

Primeiro do exemplo

Códigos

.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%);
}

Segundo do exemplo

Códigos

.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%);
}

Terceiro do exemplo

Códigos

.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%);
}

Quarto do exemplo

Códigos

.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%);
}

Quinto do exemplo

Códigos

.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%);
}

2. Salve! E agora vá em Layout abra um novo gadget e dentro dele cole:

Códigos

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

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.