Learn how to make diagonal shapes in CSS Code and Adobe products, including demonstrations for Adobe Illustrator and Adobe Photoshop.
Shear a rectangle in Adobe Illustrator
If you’re looking to create a diagonal shape in Illustrator, here’s how. You’ll use your Rectangle tool to draw your shape. Now, with your shape selected go to Object > Transform > Shear. Choose your angle settings. The WVU diagonals are at a 33.75 degree angle (learn more about this design element in the WVU Brand Guide).
Video: Creating a Diagonal Shape in Illustrator
Create a Diagonal in CSS and HTML
The West Virginia University website uses diagonals as a design element. The Diagonals are created with CSS.
On this page, the Diagonal is attached using H1::before with this CSS.
.addyourownclass h1:before {
background-color: #EAAA00;
content: '';
position: absolute;
right: 0;
left: -2.75em;
height: 3em;
top: 0em;
width: 1.25em;
opacity: 1;
z-index: 1;
transform: skewX(146.25deg);
}Create a Diagonal in Photoshop
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.
