When a client approached me and wanted a slanted div overlay on the homepage, I knew straight away it would have to be built in CSS. Why? Because the overlay his graphic designer built into the image, did not display correctly on devices. The text was completely unreadable.
So I went searching the deep dark corners of the internet for a slanted DIV overlay, and I found this awesome article. Nils explains it in a much cooler way than me, and has awesome graphics to match, so I won’t go into detail here. Regardless I am sharing the code I used to implement this on a WordPress site and you are welcome to cut and paste it into your next project.
![alpha omega digital skew transform](https://alphaomegadigital.com.au/wp-content/uploads/2021/06/diagonal-cover-1024x355.png)
Step 1.
First I cloned Nils pen on Codepen, and added the code from the article. Now with the code he provided, as soon as I dumped it into WordPress it did not display the same. I had to modify it heavily to get the look I wanted. Mostly because he was using the transform:skewY property, and for this project I need to use transform:skewX. That and I needed multiple media queries to work with WordPress. I started with the overlay, and then made some design decisions on how wide I wanted it to be. It had to be wide enough to cover roughly half the image, and comfortable display the text inside it, but not so wide that it don’t go all the way to the edge of the screen.
![alpha omega digital transform skew Y](https://alphaomegadigital.com.au/wp-content/uploads/2021/06/skew-y.png)
Step 2.
Then I added my text into the heading tags, and added a default margin for a wide screen. Because we are using the transform:skewX() property, everything inside the DIV is going to skew including the text. We don’t want this. Here’s an example of the ugliness that skewed text is, check out this H2 element:
![](https://alphaomegadigital.com.au/wp-content/uploads/2021/06/slanted-div-overlay.--1024x336.png)
Step 3.
I added the transform:skewX() property to each heading element. Since the overlay has a property of transform:skew(200.25deg), we have to apply transform: skewX(-20deg) to each heading element to ensure the headings are upright.
![alpha omega digital skew Y](https://alphaomegadigital.com.au/wp-content/uploads/2021/06/skew-y-1.png)
![](https://alphaomegadigital.com.au/wp-content/uploads/2021/06/slanted-div-skew-right-1024x400.png)
Step 4.
I started working on the media queries to make the page look responsive on all devices. This was a tad painful, as I had to keep tweaking the elements and overlay to get the right balance, but I got there. Now mind you if you view the Codepen, and it doesn’t look right on devices- this code has been used on a live wordpress site, so the responsive widths work on WordPress but they will not work on Codepen. Click here to view the source code.
Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.
JustinNex says
услуги seo https://process-seo.ru
Wbiefs says
probenecid where to buy – order probenecid 500mg online cheap buy generic carbamazepine 200mg
Sfwudz says
order generic neurontin 800mg – neurontin 100mg pill azulfidine oral
Elliotalify says
Джип туры по Крыму https://м-драйв.рф/tours/vyshe-oblakov/ уникальные маршруты и яркие эмоции. Погрузитесь в увлекательнее приключение вместе с нами. Горные, лесные, подземные экскурсии, джиппинг в Крыму с максимальным комфортом.
Evkqdd says
buy colospa medication – buy arcoxia generic oral cilostazol
Paswuh says
how to get celecoxib without a prescription – flavoxate price indomethacin 75mg ca
Domingoalkak says
Авторские джип-туры по Крыму https://м-драйв.рф/tours/dyhanie-prirody/ из Ялты. Уникальная возможность исследовать самые живописные места Крыма.
Charlierelry says
Промокод при регистрации Фонбет промокоды от бесплатно
При регистрации на Фонбет использование промокода, такого как ‘GIFT200’, позволяет новым пользователям получить бонусные ставки или другие награды. Ввод промокода в специальное поле при регистрации активирует бонусы, что помогает новым игрокам успешно начать игру и увеличить свои шансы на выигрыш.
Thomasrib says
вавада рабочее зеркало на день https://damntroublemaker.com
Lloydlaf says
air helium balloons Dubai order balloons with inexpensive delivery
Ypjkse says
rumalaya medication – buy generic shallaki for sale order endep
Nslzsk says
buy diclofenac 50mg online – cambia pills purchase aspirin generic
DouglasQuore says
Бесплатный промокод Fonbet https://kmural.ru/news_importer/inc/aktualnue_promokodu_bukmekerskoy_kontoru_fonbet.html
Бесплатные промокоды Fonbet предоставляют пользователям возможность получить различные бонусы, включая бесплатные ставки. Примером такого промокода является ‘GIFT200’, который активирует фрибеты для новых игроков. Эти промокоды делают игру более увлекательной и увеличивают шансы на выигрыш.
Marioguiny says
seo аудит сайта москва продвижение сайта в москве
Ethanrelry says
Букмекерская контора Melbet является одним из столпов международной беттинговой индустрии. За счет масштабной маркетинговой компании, высоких коэффициентов и оперативной технической поддержки БК Мелбет удалось привлечь и удержать большое количество игроков. На сегодняшний день, букмекер предлагает получить один из самых высоких бонусов на рынке – 10400 рублей. Размер бонуса в Melbet составляет 100% от суммы первого пополнения, но не менее 100 рублей и не более 10400. К примеру, если пополнить баланс на сумму 4000, то справа от основного счета появится бонусный. Как видим, использовать промокод бк Melbet при регистрации имеет смысл, особенно тем бетторам и бонусхантерам, которые привыкли заключать пари по-крупному. С учетом того, что он бесплатный – воспользоваться им может абсолютно любой игрок.
Jeffreygab says
заказать разработку сайта продвижение сайта в москве
Larryniz says
seo оптимизация сайта цена https://seo-5.ru