Jump to content
Please Use CODE Tags

HTML/CSS

Nater
By Nater
in Programming
 Share
Posted

How do you do this?
Ip956uZ.png

I want to add that little knob thing to mine and I can't for the life of me figure it out, or is it done through something else?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted 




a:hover { 



    background-image: url("image2.jpg");



}







			
		


		
			

	

		

		

			

	CPU: Intel Core i5 4690K @ 4.6Ghz CPU Cooler: Noctua NH-D15 GPU: GTX 1070 TI RAM: Crucial Ballistix Tactical 16GB (4x4) Mobo: ASUS Z97-PRO(Wi-Fi ac) PSU: Corsair RM Series RM750 Case: Fractal Design Define R4 no window


		

	


		
	


	

	




















	

		

			
			
			

			
			
			

			

			
				

					

	
	
		

			
				
				

					
						

	
	

					
				

			
			
			
		

	


				

			
			

				
			

		

	




	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
					
					
					
				

			

			
		

	

	

	

    

	

		

			

a:hover {     background-image: url("image2.jpg");}


^^


 


Just use Photoshop/GIMP or whatever to make it.



			
		


		
	


	

	






















	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
					
					
					
				

			

			
		

	

	

	

    

	

		

			

this is the css:


.embed-nav a.active:after {  content: "";  position: absolute;  top: 100%;  left: 50%;  z-index: 1000;  border-top: 8px solid #ccc;  border-left: 8px solid transparent;  border-right: 8px solid transparent;  ;}


basically its a box with zero size and a thick border that's transparent on every side except the top



			
		


		
			

	

		

		

			
I remain,  


msevilgenius


		

	


		
	


	

	






















	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
  • Author
    • 
					
					
					
					
					
				

			

			
		

	

	

	

    

	

		

			

What if I wanted it to go off of the right side?


 


I came up with (me editing someone elses example)


        .active:after             {                content: "";                position: absolute;                right: -12px;                top: 8px;                width: 0;                height: 0;                border-top: 11px solid transparent;                border-left: 10px solid green;                border-bottom: 11px solid transparent;            }



			
		


		
	


	

	






















	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
					
					
					
				

			

			
		

	

	

	

    

	

		

			



 


What if I wanted it to go off of the right side?


 


I came up with (me editing someone elses example)


        .active:after             {                content: "";                position: absolute;                right: -12px;                top: 8px;                width: 0;                height: 0;                border-top: 11px solid transparent;                border-left: 10px solid green;                border-bottom: 11px solid transparent;            }




This is what I use for all my CSS shapes, super cool little resource https://css-tricks.com/examples/ShapesOfCSS/



			
		


		
			

	

		

		

			

	I am good at computer





	

		Spoiler
	


	

		

			Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop 
		

	




		

	


		
	


	

	






















	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
					
					
					
				

			

			
		

	

	

	

    

	

		

			

Here you go


<html><head>	<meta charset="UTF-8">	<title>Document</title>	<style>		.square{			background: red;			width: 200px;			height: 40px;                        overflow: visible;                        position: relative;		}		.square:after{			content: "";			position: absolute;			left: 100%;			top: 12px;			width: 0;			height: 0;			border-style: solid;			border-width: 8px 0 8px 16px;			border-color: transparent transparent transparent red;		}	</style></head><body>	<div class="square">Some Text</div></body></html>



			
		


		
	


	

	






















	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				
			
			



		

	


	

	
	
		
	

			
				
				



	
	
		

			
				
Create an account or sign in to comment

				
You need to be a member in order to leave a comment

			
	
			

				

					

						
Create an account

						
Sign up for a new account in our community. It's easy!

						
							
						
						Register a new account
					

					

						
Sign in

						
Already have an account? Sign in here.

						Sign In Now
					

				

			

		

	


			
		

	

	
		

			

				
					


    
          Share
    

    

        
        
            

            
        
    


				
				
                

                




				
			

		

	







	

		
			
				Go to topic listing
				Programming
			
		
	

	





							

						

						


	

		
		
		
			

				



	
	



			

			

		
		

	

		
	


	


					

					

				

			

			
		

		
		


	×