Tips for creating stylish diagonal backgrounds using Bootstrap 5

Is there a way to achieve diagonal styled backgrounds, like the examples shown below, while using Bootstrap 5 and (s)css?

It would be ideal if this could be seamlessly integrated with other Bootstrap background utilities as outlined in the documentation here: https://getbootstrap.com/docs/5.3/utilities/background/

For instance, when using:

<div class="bg-primary-subtle text-emphasis-primary">
  Lorem ipsum.
</div>

or with different colors, gradients, and opacities:

<div class="bg-success text-white bg-gradient bg-opacity-75">
  Lorem ipsum.
</div>

is there a simple way to incorporate a diagonal effect (either upwards or downwards)?

https://i.sstatic.net/pE6y3.png

or perhaps like this:

https://i.sstatic.net/RKGVU.png

htmlcsstwitter-bootstrapsassbootstrap-5

Answer №1

To crop the top side of an element using the CSS property clip-path:

:root {
  --offset: 1.5em;
}

.diagonal-grid > div:not(:first-child) {
  margin-top: calc(var(--offset) * -1); 
}

.diagonal-grid > div:nth-child(even) {
  clip-path: polygon(0 var(--offset), 100% 0, 100% 100%, 0 100%);
}

.diagonal-grid > div:not(:first-child):nth-child(odd) {
  clip-path: polygon(0 0, 100% var(--offset), 100% 100%, 0 100%);
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<!-- Body -->
<section class="diagonal-grid">
  <div class="bg-primary-subtle text-emphasis-primary p-5">
    Lorem ipsum.
  </div>
  <div class="bg-danger-subtle text-emphasis-primary p-5">
    Lorem ipsum.
  </div>
  <div class="bg-info text-emphasis-primary p-5">
    Lorem ipsum.
  </div>
  <div class="bg-body-tertiary text-emphasis-primary p-5">
    Lorem ipsum.
  </div>
  <div class="bg-success text-emphasis-primary p-5">
    Lorem ipsum.
  </div>
</section>

If you prefer SCSS, you can use the following snippet:

.diagonal-grid {
  $offset: 1.5em;
  
  > div {
    &:nth-child(even) {
      clip-path: polygon(0 $offset, 100% 0, 100% 100%, 0 100%);
    }
    &:not(:first-child) {
      margin-top: calc(#{$offset} * -1);
      &:nth-child(odd) {
        clip-path: polygon(0 0, 100% var(--offset), 100% 100%, 0 100%);
      }
    }
  }
}

You can dynamically assign classes to choose which corner to crop. Note that cropping the top side of an element may not work as expected, so it's best to limit it to the top of the first element.

:root {
  --offset: 1.5em;
}

.diagonal-grid > .cut-top-left {
  clip-path: polygon(0 var(--offset), 100% 0, 100% 100%, 0 100%);
}

.diagonal-grid > .cut-top-right {
  clip-path: polygon(0 0, 100% var(--offset), 100% 100%, 0 100%);
}

.diagonal-grid > .cut-bottom-left {
  margin-bottom: calc(var(--offset) * -1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--offset)));
}

.diagonal-grid > .cut-bottom-right {
  margin-bottom: calc(var(--offset) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--offset)), 0 100%);
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieving full opacity text within a semi-transparent div: a simple guide

Within my div, I have an a tag. I applied opacity:0.5 to the div, causing the text inside to also appear at 0.5 opacity. I am looking for a way to have the text display with opacity:1 inside my div that has an overall opacity of 0.5, without resorting to ...

cssopacity

Leveraging JQuery for activating an event with Bootstrap Scrollspy

I'm facing a challenge in capturing the Scrollspy event to execute a specific function. The Scrollspy feature is functioning correctly in terms of updating the active link on the navbar. However, I am struggling to capture the event for use in other p ...

javascriptjqueryhtmltwitter-bootstrap-4

Organize column 1 on top of column 2 for mobile display

Currently, I am utilizing the grid system with 2 columns set up as follows: <div class="row"> <div class="col-md-6"> 1 </div> <div class="col-md-6"> 2 </div> </div> ...

htmlbootstrap-4bootstrap-5

Align an image with text using CSS and HTML

I'm having trouble with my CSS and HTML code. I want to align the text to the right of an image in a grid format, but it keeps appearing below the image instead. Here is the code snippet: <html> <head> <style type="text/css"> #conta ...

htmlcss

Angular.js fails to load successfully every other time

My angular application is running into some issues with bower. At times, when I start up the server, I encounter the following error: Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to in ...

javascriptjquerynode.jsangularjstwitter-bootstrap

Ways to incorporate a smooth transition between the opened and closed fab functionality

I am currently utilizing VueJS and Vuetify in my project. I have successfully implemented Vuetify's FAB component, which displays a list of fab buttons as demonstrated in the documentation: <div id="fab-button"> <v-speed-dial v-mo ...

cssvue.jsvuetify.jsfloating-action-button

Alignment problem

In my design, I have a toolbar with flex display and I am trying to center my span element within it. However, I seem to be missing something in the CSS. CSS .toolbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; d ...

cssflexbox

Increasing the size of a background image as you scroll

Is there a way to adjust the background image of a div so that it scales according to the amount the page is scrolled? The current implementation works fine on desktop screens, but on mobile screens, the height of the background image reduces and the image ...

javascripthtmlcss

A tutorial on implementing a "Back to Top" button that appears dynamically while scrolling in Angular

I've developed a scroll-to-top feature for my Angular project, but I'm facing an issue. The scroll icon appears immediately upon page load instead of only showing after the user scrolls down. Any ideas or suggestions on how to achieve this? Here ...

htmlcssangulartypescriptscroll

Uploading large files on Vuejs causes the browser to crash

Whenever I try to upload a file using my browser (Chrome), everything goes smoothly for files with a size of 30mb. However, if I attempt to upload a file that is 150mb in size, the browser crashes. The server's maximum upload size has been configured ...

javascriptphphtmlvue.jsinput

Accessing the name attribute of option tags in a controller: A guide

Within my blade file, the following code snippet is present: <select class="form-control" name="region_id_report"><option name="blank">No Region</option></select> Inside my controller, a variable named $regionidreport stores the v ...

htmlcontrollerlaravel-5

using jQuery to disable textarea input

I have this HTML code and I am using jQuery: <div><textarea style="height: 150px; width: 250px" name="myName" id="myId" class="text ui-widget-content ui-corner-all" > </textarea></div> Currently, I validate this field after the su ...

jqueryhtml

Calling JavascriptInterface in an H5 environment is not permitted

Utilizing the power of vue, I created an immersive h5 page within the application framework. The seamless connection between the page and the app relies on the use of window.JSInterface for communication. My current challenge lies in invoking the JSInterfa ...

javascriptjavaandroidhtmlvue.js

Is transforming lengthy code into a function the way to go?

I have successfully implemented this code on my page without any errors, but I am wondering if there is a more concise way to achieve the same result. Currently, there is a lot of repeated code with only minor changes in class names. Is it possible to sh ...

javascriptjquerycssloopsscrollto

Can the TEXT from a <select> be passed as the value of a hidden <input> element?

<form method="POST" action="question-function.php"> <label>Choose Category</label> <select name="catid" id="catid" class="form-control"> <?php $sel3 = mysqli_query($ ...

phphtml

search engine optimized for easy input via keyboard

I have successfully incorporated AJAX search functionality into my project, inspired by this example here. The unique feature of this implementation is the ability to navigate through search results using the TAB key. The structure of my search results tab ...

javascriptjquerycss

What is the proper way to integrate EJS tags within script tags in EJS files?

I am encountering an issue with the code in my index.ejs file from YelpCamp, which is a part of Colt Steele's course. const campgrounds = <%- JSON.stringify(campgrounds) %>; I attempted to fix it by changing the code to: const campgrounds = &ap ...

javascripthtmljsonexpressejs

PHP code that prevents undefined index when uploading photos. Ensure photos are successfully inserted into an SQL

Currently, I am dealing with a registration form that includes an option for users to upload a photo for their profile picture. Everything works smoothly when trying to submit the form except for the errors related to the picture index. I strongly believe ...

phphtmlsqlimage-uploading

Tips for ensuring an element stays anchored at the bottom even when the keyboard is displayed

I recently encountered a situation on one of my pages where an element positioned at the bottom using absolute positioning was causing issues when the keyboard was opened, as it would move to the middle of the page unexpectedly. While this may seem like a ...

javascripthtmlcssreactjs

Comparing `height: calc(100vh);` to `height: 100vh;` in CSS can reveal a few

Currently tackling a project where the previous developer utilized: .main-sidebar { height: calc(100vh); } Unfortunately, I can no longer reach out to them, and I am curious about the variance (if any) between the two approaches. (Am I in the approp ...

htmlcssuser-interfacecross-browser