Publicado em 10 de mar.

Criar Flag com diagonal

Fala galera, eu tenho essa imagem que eu estou trabalhando em um novo projeto, o problema é que esta imagem é usada em vários locais do site, e o texto que é colocado dentro, também varia muito.

/applications/core/interface/imageproxy/imageproxy.php?img=http://s22.postimage.org/wwp06461p/submit.png&key=340e7890746aab214eff6d581591d78230ef130e9185dd3a4b236e5d91b0bc8f" alt="submit.png" />

Por isso eu gostaria de saber se existe uma possibilidade de fazer o mesmo efeito totalmente via CSS.

Obrigado pela ajuda.

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Henrique Barcelos· 10 de mar.

De mão beijada:

<!DOCTYPE HTML>

<html>

	<head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8">

 <title>Teste</title>

 <style type="text/css">

 * {

 padding: 0;

 margin: 0;

 }

 

 .angled {

 display: block;

 width: 10em;

 line-height: 1.4em;

 position: relative;

 background: #930;

 z-index: 1;

 color: #FFF;

 }

 

 .angled::after {

 display: block;

 z-index: 2;

 width: 0;

 height: 0;

 border: 0.7em solid transparent;

 border-right-color: #FFF;

 border-top-color: #FFF;

 content: "";

 position: absolute;

 top: 0;

 right: 0;

 }

 </style>

	</head>

	<body>

 <span class="angled">Teste</span>

	</body>

</html>

tzp· 10 de mar.

#angled {

 height: 50px;

 width: 200px;

 background: tomato;

}

#angled:after{

height: 50px;

width: 100px;

background: tomato;

content:"";

position: absolute;

left: 150px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

transform: skew(20deg);

}

gremio10· 12 de mar.

Obrigado pela ajuda de vocês, mas eu ainda não estou conseguindo o resultado desejado.

Por exemplo, o texto pode ser de tamanhos diferentes, e no código de vocês, tenho de determinar um tamanho, será que não existe um modo de conseguir deixar ele totalmente independente do tamanho do texto adicionado nele ?

Obrigado.