Make a Diagonal using CSS and Learn to Transform and Shear a Rectangle in Photoshop

In CSS, make a diagonal line by using transform: skewX(146.25deg) on a box with empty content. In Photoshop, use the Rectangle Tool to create a shape. Then choose Edit • Transform Path • Skew. Use the horizontal skew field and type in your degrees. For the same alignment as the WVU diagonal, use -33.75 or 146.25 degrees. This video is for graphic designers trying to create slanted rectangles in Adobe Photoshop. This video is also for web designers or UI designers who want to know how to make a slanted rectangle or diagonal line in HTML/CSS (in code). Full blog post with code snippets here: https://designertofullstack.com/create-diagonal-line-or-how-to-shear-a-rectangle/ _____________________________________________________________ *JOIN MY EMAIL LIST* Love quick, helpful tutorials? You’ll love the emails too. 💌 https://designertofullstack.com/join-the-list/ *ABOUT ME* Hello, world. I’m *Kelly Barkhurst* —an experienced Mac-based full-stack designer, educator, and entrepreneur passionately blending artistic vision and creativity with deep technical expertise. With a BFA and MFA in Graphic Design and a certificate in Full-Stack Web Development, I’m uniquely positioned to work at this intersection of design and tech. My driving force is to create meaningful solutions and help clients and students do the same. *What’s Kelly’s superpower?* It’s using design thinking to strategically plan the BIG picture, then diving deep into the technical “weeds” to bring that vision to life—through beautiful visual design, compelling writing, or well-crafted, functional code. *What brought you JOY today? * 👇 Share in the comments below *SOCIALS* https://twitter.com/@designer2fstack https://www.facebook.com/designertofullstack https://www.youtube.com/@UCWk0aZ-yFzCQX5bMLaISrog