That’s Why It’s Just Theory

Stripe header layout: stripe Stripe’s homepage design by Benjamin.  De Cock uses a series of gradient-based rectangles that have been skewed to create a wide diagonal.  Drawing the eye across the page. Creating non-rectangular headers In my opinion.  The hardest part of creating non-rectangular headers is finding the best way to code these layouts. Because there are a multitude of ways to achieve similar effects.  I’ve found Ahmad Nassri’s Ultimate Guide to Non-Rectangular.  Headers very helpful in determining the best approach for a particular layout. More specifically, I really enjoy how you break each type of non-rectangular form into four categories.  Simple CSS, Generated Content, Cross-Browser Compatibility, and Performance. At the end of the day, it really depends.  On your specific situation.

For example, the browsers you need to support will determine.  Whether you can use an SVG skin, CSS shapes, or 2D transforms. That said, if you take a progressively improved approach, these design trinkets don’t need to be rendered for Denmark B2B List everyone: those with an up-to-date browser can experience the gorgeous design, while those with an outdated one can get a so-so. rectangular header. If you have a better browser, you should get a better experience. Just keep in mind that all Shopify theme designs should work in IE9+ and the latest versions of Safari, Firefox, and Chrome, based on our guidelines.

Bad a/b Testing Causes Big Loss

With my examples below, I will explain why I chose to use a particular technique and address the limitations of that technique. Diagonal header with background image See the non-rectangular horizontal header of the Shopify Partners ShopifyPartners pen on CodePen. Using Ahmad Nassri’s guide and knowing what browsers we need to support with Shopify, I think the best option when using a diagonal header with a background image is to use CSS gradients. The only category where this doesn’t get top marks is browser compatibility, as Opera mini doesn’t support the feature. Otherwise, the choice is simple to implement, supports both solid colors and background images, and has one of the fastest paint times. However, if you’re looking to implement box shadows.


This option is limiting and you may want to consider using an SVG background image instead, which for any complicated shapes is generally the best way to go. The markup is very simple, the first section is your header, which contains a background-image. It has a separating section in the middle, which is what creates the diagonal header using a CSS gradient. And finally, the section below which contains the content for the next section of your site. The separator element is where the CSS key takes place: header layout: absolute position So what is really going on here? The separator is located at the top of the element header. I’ve set the top color of the divider to transparent gray.

What You Need to Know

Product Cards with Diagonal Headers header design.  Product cards Patrick Kantor’s product cards use diagonal headers.  To draw attention beyond the car and to the copy below it. Taking inspiration from the product card design above, I wanted to take what we had already done and extend it by adding a product image to the mix. How can we use this technique in product sheets? See the non-rectangular horizontal header of the Shopify Partners ShopifyPartners pen on CodePen. To extend what we’ve already done, simply add your image inside a container in the bottom section and add the following CSS. product-wrapper Where the value topis set to the negative height of your image, to move it up to the diagonal separator.

Leave a comment

Your email address will not be published.