Creating custom shaped backgrounds with linear gradients

Question

Creating custom shaped backgrounds with linear gradients

Is there a way to create a side beveled background using linear gradient? https://i.sstatic.net/3V9aq.png

Here is the HTML code:

<div class="signpost">
        <div class="column">
           
        </div>
        <div class="column bg-gray">
           
        </div>
        <div class="column">
        
        </div>
</div>

And here is the CSS code:

.signpost {display: table; width: 100%; height: 100vh; }
.signpost .column {display: table-cell; width: 33.33%; height: 100%; text-align: center;}
.bg-gray {background-image: linear-gradient(to left bottom, #ededed 0%, #ededed 100%, white 0%, white 0%);}

Check out this example for reference.

We appreciate your assistance in this matter!

html css background linear-gradients

Answer 1

Answer №1

Give this a shot

.marker {
  width: 100wh;
  height: 100vh;
  background: linear-gradient(to bottom right, blue 30%, transparent 50%) 0 0/40px 90% no-repeat,
              linear-gradient(to top left, blue 35%, transparent 55%) 100% 100%/60px 180% no-repeat, 
              #f0f0f0;
}

<div class="marker">
</div>

Answer 2

Give this a shot

.marker {
  width: 100wh;
  height: 100vh;
  background: linear-gradient(to bottom right, blue 30%, transparent 50%) 0 0/40px 90% no-repeat,
              linear-gradient(to top left, blue 35%, transparent 55%) 100% 100%/60px 180% no-repeat, 
              #f0f0f0;
}

<div class="marker">
</div>

Answer 3

Answer №2

Using a variety of gradients:

linear-gradient(to bottom right, red 49%, transparent 51%) x-position y-position/x-size y-size

.container {
  width: 300px;
  height: 300px;
  background: linear-gradient(to bottom right, red 49%, transparent 51%) 0 0/30px 100% no-repeat,
              linear-gradient(to top left, red 49%, transparent 51%) 100% 100%/50px 200% no-repeat, 
              #ededed;
}

<div class="container">
</div>

Answer 4

Using a variety of gradients:

linear-gradient(to bottom right, red 49%, transparent 51%) x-position y-position/x-size y-size

.container {
  width: 300px;
  height: 300px;
  background: linear-gradient(to bottom right, red 49%, transparent 51%) 0 0/30px 100% no-repeat,
              linear-gradient(to top left, red 49%, transparent 51%) 100% 100%/50px 200% no-repeat, 
              #ededed;
}

<div class="container">
</div>

Answer 5

Answer №3

An innovative concept featuring a single gradient:

.roadmap {
  display: table;
  width: 100%;
  height: 100vh;
}

.roadmap .section {
  display: table-cell;
  width: 33.33%;
  height: 100%;
}

.bg-gradient {
  background: linear-gradient(to bottom right,red 44%, #ededed 44.1%  55%, red 55.1%) center/100vw 1000vw;
}

body {
 margin:0;
}

<div class="roadmap">
  <div class="section">

  </div>
  <div class="section bg-gradient">

  </div>
  <div class="section">

  </div>
</div>

Answer 6

An innovative concept featuring a single gradient:

.roadmap {
  display: table;
  width: 100%;
  height: 100vh;
}

.roadmap .section {
  display: table-cell;
  width: 33.33%;
  height: 100%;
}

.bg-gradient {
  background: linear-gradient(to bottom right,red 44%, #ededed 44.1%  55%, red 55.1%) center/100vw 1000vw;
}

body {
 margin:0;
}

<div class="roadmap">
  <div class="section">

  </div>
  <div class="section bg-gradient">

  </div>
  <div class="section">

  </div>
</div>

Creating custom shaped backgrounds with linear gradients

Answer №1

Answer №2

Answer №3

Similar questions

Tips for displaying images dynamically in HTML using AngularJS

The cards are not occupying the row as planned

How to perfectly align a modal box in the center

Steps to include a CSS file in Laravel 5.6 using npm

Having trouble retrieving the accurate height value for the UIWebView

Why is the hamburger and cart icon positioned below the hamburger menu when opened?

Adjusting the width of titles in a CSS menu upon hover

The issue of JQuery UI Dialog remaining open even after triggering it through an Input focus event

Issue encountered with Tailwind Color Classes not functioning correctly when triggered by a button click within NextJS and React Vite framework

Adjusting the header background color and inserting a logo once a specific threshold is reached

The scroller's height is displayed at 100%

Exploring the process of integrating absolute paths within a global SCSS file in a VueJS project

Tips for altering the color of the email text as it is being typed into the input field

Steps for preventing form submission when the username is unavailable

Creating dynamic HTML elements using ngFor within AngularJS allows for increased flexibility and customization on the

Having difficulty removing whitespace from JavaScript code

Encountering a Javascript Error when trying to begin

What methods can I utilize to transmit Global variable data from a view to a controller?

Creating responsive Twitter Bootstrap layouts that include nested containers with beautiful background images

What is the best way to display an arrow specifically for the selected item in JQuery?