I'm eager to create a background like this, but I'm struggling to figure out the best approach.
My attempt with transform: skewY(-6deg) ended up skewing my entire page instead of just the background.
Could someone please assist me in finding the right method to achieve this effect?
Your help is much appreciated!
Here is a suggestion to get you started:
<div class="wrapper">
<div class="slanted">
<div class="inner-content">
<p>Text inside the slanted box</p>
</div>
</div>
</div>
And here is the CSS:
body,
html {
padding: 0;
margin: 0;
}
.wrapper {
overflow: hidden;
}
.slanted {
height: 400px;
-webkit-transform: skewX(-6deg);
-moz-transform: skewX(-6deg);
-ms-transform: skewX(-6deg);
-o-transform: skewX(-6deg);
transform: skewX(-6deg);
background-color: #2980b9;
}
.inner-content {
-webkit-transform: skewX(6deg);
-moz-transform: skewX(6deg);
-ms-transform: skewX(6deg);
-o-transform: skewX(6deg);
transform: skewX(6deg);
}
p {
margin: 0;
color: #ffffff;
}
You have the option to incorporate multiple background elements and gradients:
.box {
height:250px;
padding:50px 0;
background:
linear-gradient(to bottom left,transparent 49%,#0060ff 50%)top/100% 50px,
linear-gradient(#0060ff,#0060ff) center/100% calc(100% - 100px),
linear-gradient(to top right,transparent 49%,#0060ff 50%)bottom/100% 50px,
linear-gradient(to bottom right,transparent 49%,#00dbf8 50%)top/100% 50px;
background-repeat:no-repeat;
}<div class="box">
</div>For added flexibility, you can utilize CSS variables to easily adjust the skewing:
.box {
height:150px;
padding:var(--p,50px) 0;
background:
linear-gradient(to bottom left,transparent 49%,#0060ff 50%)top/100% var(--p,50px),
linear-gradient(#0060ff,#0060ff) center/100% calc(100% - 2*var(--p,50px)),
linear-gradient(to top right,transparent 49%,#0060ff 50%)bottom/100% var(--p,50px),
linear-gradient(to bottom right,transparent 49%,#00dbf8 50%)top/100% var(--p,50px);
background-repeat:no-repeat;
}<div class="box">
</div>
<hr>
<div class="box" style="--p:100px;">
</div>
<hr>
<div class="box" style="--p:40px;">
</div>My goal is to automatically align text based on the language, so that Arabic text starts from the right and English text starts from the left. After some online research, I discovered that I need to use dir="auto" in the tag and text-align: auto; in the CS ...
In this snippet of HTML code- <table style='min-width:60%;height:25px;'> <tr> <td><b><data:post.title></b></td> <td id='date-and-author' style='position: relative;bo ...
My goal is to showcase a collection of wishlist items on a basic webpage through user interaction. Here's how I envision it: 1. do something 2. do another thing 3. blahblah This snippet shows my index.js code: var wishlist = []; router.post('/& ...
I'm looking to create a unique menu with an irregular shape in Adobe Illustrator. I've attempted the following code: <div class="body_container"> <img src="img/sitio_Web.png" alt="" usemap="#sitio_Web_Map" height="787" bor ...
My website at this link features a sticky navigation bar. However, the list items are slightly misaligned to the left and I'm struggling to pinpoint the cause. Despite adjusting margins and padding extensively, the issue persists. It's important ...
Here is my dilemma: I am looking to create a grid with a fixed number of columns (that can be adjusted via javascript) and a variable number of rows, all with equal heights. The rows will be determined by the number of grid items, which are represented a ...
Hey there! I'm currently working on styling a basic input, and I'm having trouble getting the unfocus animation to work properly. Can anyone help me figure out what's going wrong? I've tried commenting out the all: unset line and expl ...
Is there a way to style a select box without changing its fixed width when using lowercase and uppercase letters in the option tag? How can I achieve this with 'width="auto"'? DEMO: http://jsfiddle.net/uG3gq/ <div class="select_box" style="m ...
Recently, I delved into the world of asciidoc and decided to create an example in Python. However, every time I attempt to display a code blog in HTML, I encounter an exception that says 'source-highlight' is not recognized as an internal or exte ...
I have a unique function that incrementally increases the date by one day every second. Once the date matches specific dates, I aim to update my #newsDiv with extra text content. The #newsDiv will display all historical "news" and will be set to scroll to ...
Looking to customize my input fields to resemble labels at first, then apply editable styles with angular.js upon button click. Utilizing bootstrap for my project, wondering if there is a built-in class that can be toggled on and off for these inputs? ...
I am currently implementing Bootstrap accordions in an Angular application and I am facing an issue where I want to have a colored border all around each accordion panel. The problem is that by default, Bootstrap removes the top border from all accordions ...
When looking at the following CSS code, I noticed that the bottom and top borders seem to overlap, creating a thick line. I'm having trouble figuring out how to remove it. Any suggestions or advice would be greatly appreciated. Thank you! HTML Code: ...
I am facing a challenge with a large HTML file that contains approximately 300 similar anchor tags that need to be removed: <a href="javascript:void(0);" onclick="javascript:thumbs(198, 0, 'architecture')" class="icon"></a> The prob ...
I am new to coding and encountered an issue when trying to download images in reactjs. After clicking the download button, I only receive a blank pdf file. https://i.stack.imgur.com/0XJcC.png The function in my react code that attempts to generate the p ...
Looking for some help here - when I click a button, the cursor remains standard and doesn't show loading. Any suggestions on how to fix this? Below is the snippet of my code: <div class="signup"> <input type="submit" value="Sign Up" tit ...
Currently, I am encountering an issue with the display of a ui-select dropdown inside a ui bootstrap modal that has overflow css set up. Whenever the ui-select dropdown is opened, the list of options appears within the modal but is partially obscured by t ...
Currently, I have code that controls the hiding and showing of my navigation menu when a user scrolls up on the page. $.fn.moveIt = function(){ var $window = $(window); var instances = []; $(this).each(function(){ instances.push(new moveItItem($( ...
My design consists of 3 columns, and I need to insert a modal into the second column. The challenge is ensuring that the modal stays within the confines of the 2nd column when the screen size changes, specifically for desktop sizes ranging from 1922x1080 t ...
I am curious about how I can determine the number of children nested within parent-child relationships. For example: const parent = document.querySelectorAll('.parent'); parent.forEach(el => { const ul = el.querySelector('.child3-chi ...