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;
}
Having trouble with creating new sections or content after the homepage? The issue is that the new content doesn't appear on a new page but rather on the homepage itself. An example of this problem can be seen on this CodePen project, where an h1 sect ...
I have a div element that I would like to customize the text selection style for. Currently, setting the style using CSS works perfectly: <div>Text text here</div> <style> div::selection { background: #FFF; color: #0 ...
I'm facing a challenge with my SceneBuilder project. I have developed a scene that consists of several labels, and I want to highlight some of them by adding a red asterisk at the beginning of their text. Unfortunately, I haven't been able to fin ...
How can I locate the text "Interesting" which is the first occurrence of the class b after h1.important when using Selenium? <div class="a"> <div class="b">Not interesting</div> </div> <div class="title"> <h1 c ...
Seeking advice on creating a layout where the left side consists of a sidebar menu occupying 24% and the right side contains main content taking up 75%, with a clickable vertical divider at 1% between them. When this line is clicked, the left part will hid ...
This webpack.config.js file is dedicated to the module section, where loaders are defined for JSX files and CSS. module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'bab ...
My JQuery image fader has a width of 100% and height set to auto. I'm thrilled that it works perfectly on the iPhone as well. Now, I am facing a challenge while trying to make content "float" after my JQuery slider. The problem arises because I use ...
I am attempting to utilize the counter increment feature in CSS for my ordered list, but it doesn't seem to be functioning properly. Here is the desired format I want to achieve: 1. Acknowledgements 1.1 blah, blah .... 1.2 blah, blah .... 1 ...
Selenium Web Driver- I'm having trouble locating an element using Xpath. Any suggestions on a better way to locate the element below? <div class="gwt-Label">Declined</div> I attempted to retrieve the text in the element using the followi ...
Here is the HTML code I am working with: <div class="app-bar"> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> </div>' ...
I've been struggling to accomplish a simple task using Jquery and CSS, but I seem to be stuck. My issue involves making an ajax request to update a PostgreSQL table and retrieve an id in return. This id corresponds to the id of a row in a previously ...
I'm currently working on a web application using Angular 5 and Bootstrap 4, and I've encountered issues with the navigation menu bar dropdowns. Despite following the guidelines provided in the official documentation here, I can't seem to get ...
I have a textarea in my html file and I am trying to prevent the text from overlapping with an emoji icon button. I would prefer not to use a z-index for the emoji as it may cause issues with other elements on the page. Below is the code snippet: HTML & ...
Is there a way to make a button focus when hovering over a card in Bootstrap from any place on the card? Currently, the button only focuses when directly hovered over. I want to achieve the effect shown in the second image after hovering over any part of t ...
Within my Laravel 5.7 application, I have implemented the "yajra/laravel-datatables-oracle": "~8.0" library and found a helpful thread on customizing the processing message at this link. I adjusted the processing message styling as follows: .dataTables_pr ...
Hi there! I recently started diving into JavaScript and encountered a little hiccup. I've been working on a dice game where images change randomly whenever a button is clicked. The images transition from one to another, but I wanted to add a rolling ...
Currently utilizing Bootstrap 5 and incorporating columns within the framework. However, encountering an issue where there is black space on the right side of the screen and certain content disappearing on the left side as demonstrated here. Here is the c ...
Is it possible to include more colors between the "beginning-color" and the "ending-color" in this code that changes the background color on scroll? example $(document).ready(function(){ var scroll_pos = 0; var animation_begin_pos = 0; ...
Hey there! I've got a div with a dropdown menu that reveals text and images based on the selected option. What I want to achieve is having a button that allows users to copy all the content inside the div. Below is my sample code for the div dropdown ...
Hey there, I'm facing an issue with the button positioning. I really need the button to be placed at the bottom of the well, but for some reason, it keeps showing up next to the image instead. This is what's happening: the button is ending up be ...