Hello everyone, I am in need of creating a unique slideshow for my website and I want to start by splitting a div into two sections using a slightly skewed diagonal line that is either semi-transparent black or solid white. I have searched extensively online for an answer but haven't found anything useful yet. I have tried various methods myself, but none of them achieved the desired effect. You can refer to this image for better understanding:
.ss {
float:left;
width : 50%;
box-sizing: border-box;
border: 1px solid red;
height: 50px
}
section {
position: relative
}
.separator {
height: 50px;
width: 30px;
background: black;
position: absolute;
right: calc( 50% - 15px);
transform: skewX(-20deg);
}<section>
<div class="one ss"></div>
<div class="separator"></div>
<div class="two ss"></div>
</section>If you want to add a special design element to each div, you can use the :before pseudo-element.
This method is useful for creating sliders and doesn't require any additional HTML code. Simply insert your div elements within the existing structure.
body{
background-color:#999;
}
.main{
width:300px;
height:100px;
background-color:#999;
}
.div1{
width:50%;
height:100%;
background-color: blue;
float:left;
position:relative;
overflow:hidden;
}
.div1:before{
content:"";
dislpay:inline-block;
width:20px;
height:110%;
background-color:#fff;
position:absolute;
transform:rotate(10deg);
right:0px;
transform-origin: bottom;
}
.div2{
width:50%;
height:100%;
background-color: red;
float:left;
position:relative;
overflow:hidden;
}
.div2:before{
content:"";
dislpay:inline-block;
width:20px;
height:110%;
background-color:#fff;
position:absolute;
transform:rotate(10deg);
left:-20px;
top:-5px;
transform-origin: bottom;
}<div class="main">
<div class="div1"></div>
<div class="div2"></div>
</div>To see an example of this code in action, visit: https://codepen.io/miladfm/pen/owBOKK
Here is an example of something you might like
.container{display:block;width:100%;height:200px;background-color:#ccc;}
.left{float:left;width:45%;height:200px;background-color:#ccc;}
.diagnol{float:left;width:10%;height:200px;background-color:#000;
-ms-transform: skew(-20deg,0deg); /* IE 9 */
-webkit-transform: skew(-20deg,0deg); /* Safari */
transform: skew(-20deg,0deg); /* Standard syntax */
}
.right{float:left;width:45%;height:200px;background-color:#ccc;}<div class="container">
<div class="left"></div>
<div class="diagnol"></div>
<div class="right"></div></div>Experimenting with different color combinations is key.
#container {
margin: 0 50px;
}
.one {
position: relative;
background: darkgreen;
width: 100px;
border: none;
display: inline-block;
height: 90px;
padding: 0px;
margin: 0 1px;
}
.one:nth-child(1):after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: darkgreen;
transform-origin: bottom left;
transform: skew(-28deg, 0deg);
}
.two:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
left: -25px;
background: blue;
transform: skew(-28deg, 0deg);
}
.two {
width: 60px;
position: relative;
background: blue;
color: blue;
display: inline-block;
height: 90px;
margin-left: 51px;
}<div id="container">
<div class="one"> </div>
<div class="two"> </div>
</div>Working on a React.Js website and looking to improve the Contact Me page by adding a cooldown to the button. Unfortunately, I haven't shared all the code here but feel free to reach out on Discord: uvejs#5162 for more details. import "./contactpa ...
Whenever I try to position a div inside another div using float, I encounter problems. <div id="main"> <div id="anotherDiv"> <h1>Test</h1> </div> </div> Here is the corresponding style sheet: #main{ ba ...
I'm encountering a strange issue with a PHP page in Wordpress. When I include an inline Thickbox on the page and try to open it, the Thickbox appears at the very bottom of the page, below the footer. Interestingly, I copied the generated HTML code an ...
I found a useful tutorial on building a scrolling menu for smaller screen sizes. You can check it out here. However, I encountered an issue when trying to add a border width element. Whenever I define the width, it overrides the scrolling: auto; element. ...
My file input setup looks like this; <input type="file" id="restoreFile"> To customize the appearance, I first set display: none; and created a label for the "restoreFile" input styled as a button. When I click the label (button) ...
While running the code below, the website crashes with the error: "Allowed memory size of 268435456 bytes exhausted (tried to allocate 254643 bytes)" $queID = "LCGQ00" . $ID; $sqlquecheck = "Select QueryID FROM Questions Where QueryID = & ...
Encountering an issue with my Angular app on mobile Safari during the initial load, where it hangs on a blank page for nearly 2 minutes. Interestingly, the app functions perfectly on other browsers, including Mac Safari and iPad Safari. Initially, I suspe ...
My post contains an embedded SoundCloud player using the following code: <iframe class="soundcloud_iframe" width="100%" height="166" scrolling="no" frameborder="no" src="'.esc_url('https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcl ...
I am facing a design challenge that I believe can be solved using CSS, although it might require some Javascript. My issue involves a gallery of images with varying sizes and proportions. I would like to achieve the following: Distribute the images in m ...
While practicing HTML and CSS as I normally do, I decided to work on a PSD template yesterday. Initially, it seemed straightforward, but soon I encountered the issue I'm currently facing. Specifically, I am trying to change a specific part of text ba ...
I've been struggling all morning to find a solution. I've gone through several tutorials, but I still can't wrap my head around how this should work. In my Electron app, there is a button that, when clicked, should execute a batch file (hpm ...
Just starting out with css, trying to get some practice. I'm attempting to position two divs on opposite sides of a parent div. Switching flex-direction from 'column' to 'row' causes the divs to disappear. #assignments-wrapp ...
There are two div elements with display: table-cell property: <div> This is a table cell </div> <div> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Som ...
Once again, I find myself tinkering with CSS... In the current setup, the map container is scrolling on its own, separate from the rest of the content within the container. How can I enable the entire page to scroll when additional content is added to the ...
I am looking to enhance the appearance of text on an HTML page by making it bold. I have implemented the following code: <script type="text/javascript" > function getSelectedText(){ if(window.getSelection){ ; return window.getSelect ...
Recently, I created a basic slideshow with 4 images where upon clicking, the selected image displays in a larger div box. The functionality is quite straightforward, but if you have any queries, feel free to ask. As of now, with only 4 images in the slides ...
On my website powered by Elementor Pro, I have implemented custom CSS to animate the Shape Divider with a "Brush Wave" style. Below is the code snippet: .elementor-shape-bottom .elementor-shape-top .elementor-shape body { overflow-x:hidden; } @keyframes ...
For positioning 6 different elements on a webpage, I've experimented with various methods: I initially tried stacking two unordered lists vertically but faced issues with scaling when stretching the page. Another attempt was using a table, but I stru ...
I'm encountering a major challenge. Currently, I am creating a login process for a client and here is the approach I have taken: function Jump(pal){ if (pal=='10528'){window.open('http://www.google.es','_parent')} Subs ...
Is there a way to modify my code so that the images from the first directory are displayed on the page when it loads, instead of waiting for a menu option to be clicked? The page looks empty until a menu option is selected, and I would like the images to s ...