Question 242573 in CSS Question posted in
Some basic documentation can be found here.

Triangular shaped cursor effect in css not working

I’m a total beginner who has no clue what is he doing and trying to create a custom cursor effect for our website at my job with CSS and JavaScript. Everything works fine except I can’t create a triangular shape. I’ve read articles about using borders but decided to try a different way, but it’s not working. The code is attached below. Can anyone tell me what am I doing wrong?

body {             
 width: 30%;
 padding-bottom: 21.27%; /* = width / 1.41 */
 position: relative;
 overflow: hidden;
     
}                 

#myCustomCursor {             
position: fixed; 
width: 100%;             
height: 100%;             
background: #CC2FFA; 
top: var(--y, 0);             
left: var(--x, 0);             
transform-origin: 0 100%;
transform: rotate(45deg);  
transform: skew(20%);
transform: translate(-50%, -50%);           
mix-blend-mode: difference;             
pointer-events: none;             
z-index: 99999;       
}                  

#myCustomCursor.myCursorHoverState {             
  width: 160px;
  height: 160px;
  background: blue;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    @LNTR... thanks for responding. That helped me rotate the box, so very good to know. However, it is still not working right. So let me backup a step and try this again... I started with the code below which works great, but is a circle. How can i change this to be a triangle instead of a circle?

    body {             
//cursor: none;
min-height: 100%;
background: rgb(255, 255, 255);        
}                 

#myCustomCursor {             
position: fixed;             
width: 30px;             
height: 30px;             
background: #cc2faa;             
border-radius: 50%;             
top: var(--y, 0);             
left: var(--x, 0);             
transform: translate(-50%, -50%);             
mix-blend-mode: difference;             
pointer-events: none;             
//transition-duration: 300ms;
//transition-timing-function: ease-out;             
z-index: 99999;       
}                  

#myCustomCursor.myCursorHoverState {             
width: 160px;
height: 160px;
background: #812ce5;
}

  2. 0

    It is because you’re using both,
    transform: rotate(45deg); transform: translate(-50%, -50%); . In your case the later one(transform: translate(-50%, -50%);) overwrites the rotate transformation(transform: rotate(45deg);). You can fix this by adding both values to a single line and separating it with a space. i.e: transform: translate(-50%, -50%) rotate(45deg) ;

    You can read more about this from the following answer.

    Rotate and translate

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search