Is there a way to make two divs span the full width of the page while being divided in half by a diagonal line using CSS?
I am working on a slider and once completed, I need to add content to both parts. Any ideas on how to accomplish this with two divs?
Here is a creative example for you:
Unique Example
div {
min-height: 150px;
background: #6C757D;
position: relative;
width: calc(50% - 20px);
}
.div1 {
float: left;
}
.div2 {
float: right;
}
.div1:after, .div2:before {
content:'';
position: absolute;
top: 0;
width: 0;
height: 0;
}
.div1:after {
left: 100%;
border-top: 100px solid #6C757D;
border-right: 50px solid transparent;
}
.div2:before {
right: 100%;
border-bottom: 100px solid #6C757D;
border-left: 50px solid transparent;
}<div class="div1"></div>
<div class="div2"></div>Another Unique Example
div {
background: #6C757D;
min-height: 150px;
width: calc(50% - 15px);
position: relative;
}
.div1 {
float: left;
}
.div2 {
float: right;
}
div:after {
position: absolute; top: 0px;
content:'';
z-index: -1;
height: 100%;
width: 50%;
background: #6C757D;
}
.div1:after {
right: 0;
transform-origin: bottom right;
transform: skewX(-30deg);
}
.div2:after {
left: 0;
transform-origin: top left;
transform: skewX(-30deg);
}<div class="div1"></div>
<div class="div2"></div>One More Unique Example
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.blocks {
display: flex;
padding: 1em;
}
.block {
background-color: #6C757D;
min-height: 150px;
width: 50%;
width: calc(50% + 1rem);
}
.block--left {
clip-path: polygon(0 0, 100% 0, calc(100% - 2rem) 100%, 0% 100%);
}
.block--right {
margin-left: -1rem;
clip-path: polygon(2rem 0, 100% 0, 100% 100%, 0% 100%);
}<div class="blocks">
<div class="block block--left"></div>
<div class="block block--right"></div>
</div><div class="wrapper">
<div class="left-content"><span>left</span></div>
<div class="right-content"><span>right</span></div>
</div>
.wrapper {
display: flex;
flex-direction: row;
color: white;
font-family: system-ui;
font-size: 2rem;
overflow: hidden;
margin: 0 auto;
}
.left-content,
.right-content {
width: 50%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.left-content {
position: relative;
}
.left-content::after {
content: "";
position: absolute;
background: blue;
top: 0;
bottom: 0;
right: 0;
width: 100vw;
transform: skew(-25deg);
z-index: 10;
}
.right-content {
position: relative;
text-align: right;
}
.right-content::before {
content: "";
position: absolute;
background: red;
top: 0;
bottom: 0;
left: 0;
width: 100vw;
transform: skew(-25deg);
z-index: 10;
}
span {
z-index: 20;
}
I have developed a quiz application similar to Buzzfeed with four answer options for each question. The layout on mobile devices is satisfactory, displayed in a 2x2 grid. However, when viewing the app on desktop screens, the answers appear horizontally in ...
I have been tasked with creating a website without the use of JavaScript, following very specific instructions. Furthermore, it must be compatible with iPhone and other mobile devices, while still adhering to the no JavaScript rule. I am open to utilizing ...
In the provided code snippet, you will notice that the height of the table rows varies slightly based on the height of the images. Currently, the image tags are set to height: auto;, and changing it to 300px would make all images the same size, however, m ...
When it comes to extracting critical styles from a CSS file wrapped in a @critical rule, I run into some issues: @critical { .foo { ... } @media bar { ... } } The command I'm using for extraction involves sed search ...
I am currently experimenting with jQuery to dynamically load a specific div from another page on my server into a designated section on the existing page. While the code is successfully functioning for the first two clicks on the website, it fails to work ...
When I resize the browser, an error code google-visualization-errors-8 appears in my Google chart's CSS. https://i.stack.imgur.com/4LX1C.png What could be causing this error to occur? Note: I am redrawing the graph every time the screen is resized. ...
I'm facing an issue where my jumbotron is ending up under the navbar, but I want to position it just below with some padding in between. Here's the code snippet: Take a look at the current appearance here: This is how it looks like ...
On my HTML page, I have 2 div fields. Within each field, there are 5 images listed sideways. The issue is that the images in the div below are not lining up properly side by side. Given my limited frontend knowledge, how can I align them correctly? Here&a ...
I am a beginner in working with CSS layouts for websites and I have implemented the following code that serves my purpose. Although it is currently functional, its functionality does not necessarily mean that it is well-written. Could someone review this ...
I am interested in incorporating an interactive Adobe Edge animation that activates upon the click of a conventional HTML form button. Could you please guide me on how to achieve this? ...
Is it possible to make a div flash using CSS alone? My goal is to have this div alternate between two colors. .chat-window .msg-container-base .notification-message-unread{ float: right; font-size: 10px; color: #666; background: white; padding ...
Presenting data with headers in HTML has been a challenge for me. Below is the portion of the header I'm having difficulty with. Although I've successfully rotated the text, the issue I'm facing now is text overlap. Here's the code st ...
I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...
Why does the switch button not work with the input type radio but works with a checkbox button? How can I maintain the radio input and solve this issue? @charset "utf-8"; /* CSS Document */ /* ---------- GENERAL ---------- */ body { background: #4a4a4 ...
I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...
Is there a way to align a font-awesome icon on the left side of a text paragraph while keeping the text on the right side, even if it's longer and wraps underneath the icon? I've tried various code snippets but haven't found a solution yet. ...
Can anyone assist me in updating the background color of a div class from grey to white? The code is within a .vue file using Bootstrap and includes an enclosed SVG file. Here's the snippet: <div class="text-left my-3 bg-white"> <button var ...
Due to time constraints, I decided to save some time by utilizing a CSS template called Horizons created by Templated. This particular CSS template uses Javascript to adjust the layout for mobile devices, causing buttons to switch from inline to block for ...
Take a look at this template 1) After referring to the above template, I developed a fixed plugin using JavaScript. 2) Clicking the icon will trigger the opening of a card. 3) Within the card, I designed a form using mdb bootstrap. Everything seems to ...
I've managed to center-align a div using the following method: <div id="container" style="position:absolute; top:0px; left:50%; margin-left:-500px; width:1000px;"></div> After referring to this solution Trying to center div horizontally ...