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>I am utilizing the PHP library SimpleXML to extract information from an existing XML file on my website and incorporate it into an HTML page. Below is a snippet from the XML located at : <DTilt> <frontSide imagePath="94341/20130510150043_ACX ...
After creating a ul element, I have customized the html and css for my navigation bar: Html: <ul id="list-nav"> <li><a href="Marsrutas.html">Item1</a> </li> <li><a href="Nuotraukos.html">Item2</a& ...
I have encountered a difficulty in describing the issue at hand as I am still in the learning phase and consider myself a beginner. Within my container div, there are two other divs - one for the menu and another for the content. Both of these divs float ...
As a new designer, I have a question about how to make the background color extend to the top without any white space. Can someone please guide me on how to achieve this? <!DOCTYPE html> <html> <head> <style> body{ margin: 0px; p ...
Can anyone assist me with retrieving data details from a JSON model? I am utilizing a WCF service that returns JSON data and it works fine as I have tested it using WebClient. However, I am having trouble displaying the data on my HTML site. Despite trying ...
This is how I've set up my webpage design. <div layout="column" layout-fill ng-controller="MainCtrl as mc"> <header> <md-toolbar md-scroll-shrink> <div layout="row" layout-align="center center" flex> ...
Hey there! I have this website built with asp.net and I have a text-box for filling in quantities. Sometimes, I notice this strange icon that looks like a human appearing on the text box. It only seems to show up when using Mac Safari browser. Check out th ...
In order to achieve vertical scrolling of a sidebar div and its content (3 links) between two points, I have utilized the CSS property position:fixed; top: 100px. While this setup works well initially by positioning the sidebar 100px down from the top and ...
I attempted to create a basic landing page featuring an image background with a logo, button, and a row of 4 images displayed side by side using Flex. However, for some reason, the Flex is not functioning properly for the row of images. Here is the code s ...
My CSS animation involves a page scrolling from the bottom to the top when selected. The problem I'm facing is that the page briefly appears in its top position before disappearing to scroll from the bottom to the top. How can I prevent the page from ...
Are Safari and Chrome compatible with overflow? How does IE 6 or higher handle overflow? ...
I have a header element that I want to remain fixed while scrolling. The scrollable area should be positioned directly after the fixed header, without using position: absolute and removing it from the document flow. To better illustrate the issue, I' ...
I am currently developing a web application that features two buttons in the header: Share and Options. When a button is clicked, its related content expands and collapses when clicked again. The issue arises when the user clicks on the share button and th ...
I am facing an issue with a small mobile app built using jQuery Mobile. Within a div, I have three buttons and other content. My goal is to hide these three buttons if the user's device is running on Windows (WP). The buttons are defined as follows: ...
I'm struggling to figure out how to set the value/text of a div using javascript/jquery inside a loop. Can anyone offer some guidance on this issue? Goals: Extract data from a database. Use javascript/jquery to assign the extracted data to an eleme ...
How can I center an image inside a view in the middle of the screen using position: "absolute"? The issue is that the view takes up 100% of the width and height of the screen, causing all components underneath it (such as input fields and buttons ...
I'm having issues with displaying/hiding content when clicking on a table row. Here is the simplified code snippet: HTML: <table> <tr onclick="showDetails()"> <td>Some text <br> <span class="hiddenC ...
I am currently working on a 2 columns layout within 2 divs that have different margins set. In the left column, I have integrated a bootstrap datetimepicker and summernote. While the datetimepicker dialog overflows outside the internal div, I am wondering ...
exampleHTML=" This is sample HTML code that needs to be converted into a string using JavaScript
" I am looking to transform it into a single string format like str="This is sample HTML code, that needs to be converted into a string, usin ...If you want to check out the website, you can visit . The main goal is to create an image grid for a portfolio. It appears really nice on a 1080p screen, but anything below that seems messy and unorganized. Any assistance or suggestions on how to improve ...