Spin background from center to edge

Question

Spin background from center to edge

My goal is to create a CSS design that works seamlessly on all screen sizes. I want the background to transition from blue on the left side to white on the upper middle to the right bottom corner. Here is my current code snippet:

<style>
.wrapper {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #297fca;
}
.right {
    position: fixed;
    z-index: 2;
    top: -70%;
    right: -50%;
    background: #fff;
    width: 100%;
    height: 100%;
    transform: translateY(50%) rotate(45deg);
  }
</style>
...
 <div class="wrapper">
    <div class="right">
    </div>

  </div>

While this code works for some screen sizes, it is not a universal solution. I am seeking a CSS-only solution, but I am open to using SVG if necessary. Thank you in advance for any assistance.

css background-color css-transforms

Answer 1

Answer №1

Creating a square and triangle shape can be easily achieved using linear gradients. You will need two of them - one for the square to fill the first 50% and the second for the triangle to fill the remaining 50%.

body {
  margin:0;
  height:100vh;
  background-image:
   linear-gradient(#297fca,#297fca),
   linear-gradient(to bottom left,transparent 49.8%,#297fca 50%);
  background-repeat:no-repeat;
  background-size:50.1% 100%; /* both gradients will fill 50% width and 100% height*/
  background-position:
    left, /* The first one placed on the left */
    right; /* The second one placed on the right */
}

If you prefer not to use transparency, you can achieve the same effect with the following code:

body {
  margin:0;
  height:100vh;
  background:
   linear-gradient(to top right,transparent 49.8%,#fff 50%) 
    right -1px top 0
    /50% 100% 
    no-repeat,
   #297fca;
}

Answer 2

Creating a square and triangle shape can be easily achieved using linear gradients. You will need two of them - one for the square to fill the first 50% and the second for the triangle to fill the remaining 50%.

body {
  margin:0;
  height:100vh;
  background-image:
   linear-gradient(#297fca,#297fca),
   linear-gradient(to bottom left,transparent 49.8%,#297fca 50%);
  background-repeat:no-repeat;
  background-size:50.1% 100%; /* both gradients will fill 50% width and 100% height*/
  background-position:
    left, /* The first one placed on the left */
    right; /* The second one placed on the right */
}

If you prefer not to use transparency, you can achieve the same effect with the following code:

body {
  margin:0;
  height:100vh;
  background:
   linear-gradient(to top right,transparent 49.8%,#fff 50%) 
    right -1px top 0
    /50% 100% 
    no-repeat,
   #297fca;
}

Answer 3

Answer №2

If you want to add some interesting design to your webpage, consider using the clip-path property in CSS. By defining the fill rules, you can create unique shapes. Give this code snippet a try:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  background: #297fca;
  clip-path: polygon(0 0, 50% 0, 100% 100%, 0 100%);
}

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

Answer 4

If you want to add some interesting design to your webpage, consider using the clip-path property in CSS. By defining the fill rules, you can create unique shapes. Give this code snippet a try:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  background: #297fca;
  clip-path: polygon(0 0, 50% 0, 100% 100%, 0 100%);
}

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

Spin background from center to edge

Answer №1

Answer №2

Similar questions

Steps to display an angled bracket to indicate a line break

Eliminate any trace of Bootstrap 4 design elements on the .card-header

What is causing my divs not to center with justify-content?

Achieving an element placement in a navigation bar with flexbox and grid layout | HTML and CSS exclusive techniques

Experience the sleek and intuitive Material Design Lite navigation drawer, inspired by the likes of Google Android

Creating a dynamic visual experience with Angular 2: How to implement multiple font colors

How can I modify the content within a scoped `<style>` tag in Vue?

Using JavaScript to convert the text within a div into negative HTML code

`Considering various factors to alter class pairings`

Is there a way to modify the color of multiple disabled select fields in Internet Explorer?

Having trouble applying overlays to list items with CSS

Incorrect column alignment in Tailwind CSS

Attach the button to the input tag so that they are always connected

Modify the color of the components in Select from Material-UI

Is it possible to utilize a .css file as the origin with @font-face?

When using the `display: table-cell` property on a div element, it does not automatically respect

Arranging three items within a div container

Solution for fixing the position of a div scrollbar under the browser scrollbar

Prevent tooltips from displaying outside of an HTML table by using the overflow hidden property for horizontal scrolling

Tips for successfully sending a nested function to an HTML button and dropdown menu