Creating a zigzag pattern with a linear gradient in CSS

When attempting to create a background color for my body element using linear gradient, I noticed that it resulted in a zigzag effect

I experimented with the following code:

Body{
    background: linear-gradient(45deg, Blue 50%, red 50%)
}

The outcome was this:

https://i.sstatic.net/41t5v.png

However, what I had hoped for was different...

Answer №1

Start by setting the body element's height to 100vh; and adjusting the angle from 45deg to to bottom left to improve responsiveness on smaller screens.

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body{
  height:100vh;
  background-image: linear-gradient(to bottom left, red 50%, blue 50%)
}

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

Opinions on crafting a new gadget?

I will only provide each website interested in my widget with the code to copy and paste once. It is crucial that the code is future-proof. After much consideration, this is the widget code I have developed: <script type="text/javascript" src="http:/ ...

Create a PHP script to automatically generate lists in HTML from a text file

I am currently working on a content management system and have encountered a small issue. Imagine this scenario: I have a text file containing the following: [b]Some bold text[/b] [i]Italic[/i] - List item 1 - List item 2 - List item 3 # List item 1 # Li ...

Writing CSS rules for generating HTML code when sending emails through the command line in Go

When trying to compose HTML with CSS for email delivery using Go command line execution, errors related to CSS properties are popping up. For instance, it's showing "not found" error in the terminal for properties like background: rgb(255, 255, 255) o ...

What is the best way to activate a CSS animation?

I've hit a roadblock while attempting to trigger a CSS animation. Here's my CSS: h3[id="balance-desktop"]{ color: black; -webkit-animation-name: gogreen; -webkit-animation-duration: 2s; animation-name: gogreen; animation-du ...

A large responsive bootstrap website filling only half the screen

I am currently in the process of developing a simple version of a Content Management System (CMS). I have created a page that offers an HTML template, allowing users to insert their own text and image uploads to display on another screen. The template fun ...

Tips for adjusting the color using inline CSS

Currently, I have a div styled with blue color using CSS. However, I now require the ability to dynamically change this color. My plan is to retrieve the desired color from a database and use its hexadecimal code in place of the default blue. What is the ...

Verify if the button is assigned a specific class, then generate a 'completed' div

I'm new to working with Jquery and I have a question. In my upload form, when something is uploaded the upload-button changes class from: <a class="upload-button upload buy" id="upload-button"><span>Upload a document</span></a> ...

Excessive space being taken up by the final character in the Material-UI Autocomplete arrow endAdornment

<Autocomplete {...defaultProps} id="disable-close-on-select" disableCloseOnSelect renderInput={(params) => ( <TextField {...params} label="disableCloseOnSelect" variant="standard" /> )} /> Click h ...

Issue with Anchor class in CakePHP where the variable $action is not defined

I'm struggling to apply a class to my anchor link when it is active. How should I define the $action variable in this case? Version: 4.2.9 Error: Undefined variable: action [ROOT\templates\layout\default.php, line 108] templates/lay ...

Targeting the landscape mode on screens of both iPhone 4 and iPhone 5 sizes using CSS3 Media Queries

I'm facing a problem with CSS3 media queries while developing a mobile site. The code I've written works perfectly on the landscape mode of an iPhone 5, but it's not quite right on an iPhone 4 or earlier in landscape mode. /* Default stylin ...

Using AJAX to update content based on selected value in a dropdown menu

My challenge lies in ensuring that a select box retains the selected value from a database entry and triggers an onchange event during form editing or updating. While I have successfully populated the data in the select box based on other selections, I a ...

Is the homepage the only page rendering correctly?

After working on an MVC project for over 6 months, I consistently faced a problem with HTML and CSS. The homepage always rendered correctly, as shown here: http://prntscr.com/tucp1 However, all other pages had strange white spaces between words, like in t ...

Having trouble implementing a transition on a dropdown menu in React

Can anyone help me troubleshoot an issue with adding a transition to a select box that appears when clicking on an input field arrow? I have tried implementing a CSS transition property, but it doesn't seem to be working. Any suggestions on what might ...

How can I keep the cursor from automatically moving to the beginning of an input field when the type changes?

Currently in the process of creating a Password field that allows users to hide or display their password in React/Ionic. I am aiming to maintain focus on the password field when switching the input type, similar to how it is done on the PayPal Login page ...

Incorporate a background image property using Jquery

Can anyone help me with adding the css background-image:url("xxxxx") property to my code? jQuery('#'+$trackID+' .sc_thumb').attr('src',$thumb_url); jQuery('#'+$trackID+' .sc_container').css('display& ...

Generate clickable links on a web page with PHP and a form

Every week I find myself tediously creating links by manually copying and pasting. It's starting to feel like a crazy process, and I'm sure there must be a faster way. A123456 B34567 d928333 s121233 I need these numbers to be transformed into h ...

When I attempt to view my calendar in a modal popup, the opening action causes it

Recently, I encountered an issue with the bootstrap datepicker in a modal pop-up. The problem arises when it gets cut off unexpectedly. I am seeking suggestions or solutions to resolve this inconvenience. <input id="doohMediaStartDate" name="startDate" ...

Tips for nesting an anchor tag within another tag

After reviewing various inquiries on this platform, it has been commonly believed that embedding an anchor tag inside another anchor tag is not achievable. However, I recently stumbled upon a website that successfully accomplishes this and I am curious to ...

How can we prevent the HTML escaping of text children in React.createElement?

Let's examine the call to React.createElement: React.createElement('span', null, null, ['&gt;&lt;',]) When executing this code, React will escape the characters &gt; and &lt;. Is there a method to prevent these sp ...

Implementing an alert box upon redirect with PHP

This question is pretty straightforward. I have a form on my index.html page and PHP code to submit that form to an external URL, then redirect back to the index: <?php Echo "<style>body{background:#3e4744}</style>"; Echo "<style>h2{ ...