Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gremio10

Criar Flag com diagonal

Por , em Desenvolvimento frontend

Recommended Posts

gremio10    14

gremio10
Postado

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.

 

submit.png

 

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

 

Obrigado pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

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>







			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
tzp
			  

	
		
	
			 24
	
		
	

		

		

			


	
		tzp
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			






#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);   



}



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
gremio10
			  

	
		
	
			 14
	
		
	

		

		

			


	
		gremio10
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

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.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito