Rotate a div using CSS by 10 degrees while spanning the full width

I stumbled upon the website recently, particularly noticing the Social News section on the side.

I am curious about how to create rotated divs (around 10 degrees) that span the full width of a webpage. Is it possible to make this responsive so that it works on mobile phones as well? I'm not very experienced with rotating divs. Could anyone guide me on how to achieve this using CSS?

This is what I have attempted so far:

<div class="container"></div>

And here is the CSS I used:

.container {
   transform: rotate(10deg);
   width: 100%;
   height: 200px;
   background: red;
}

However, the container does not stretch to full width as expected.

jqueryhtmlcss

Answer №1

It can function without the need for transformations, relying solely on CSS Shapes. However, it is also possible to achieve the same effect with transforms. For more separator styles, you can explore A Collection of Separator Styles.

html, body {
  margin: 0;
  padding: 0;
}

.outer {
  position: relative;
}

.outer::before {
  position: absolute;
  top: 0px;
  
  border-top: solid 40px #ffffff;
  border-right: 100vw solid rgba(0,0,0,0);
  
  content: '';
}

.outer::after {
  bottom: 0px;
  position: absolute;
  
  border-bottom: solid 40px #ffffff;
  border-left: 100vw solid rgba(0,0,0,0);
  
  content: '';
}


.inner {
  height: 200px;
  padding: 60px 1em;
  
  background: #ccc;
}
<div class="outer">
  <div class="inner">…</div>
</div>

Answer №2

You can give this a try:

#myDiv {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

If you use a negative value, it will rotate the element counter-clockwise.

Reference

Answer №3

HTML

<div class="rotated"></div>

CSS

.rotated {
    transform: rotate(10deg)
}

It appears that the element in question is not actually a rotated div, but rather part of an image slideshow. This can be confirmed by visiting the following link: https://i.stack.imgur.com/jUmjx.png

UPDATE: Support for this feature extends to Internet Explorer 9 as well. For more information, refer to http://caniuse.com/#search=transform%3A%20rotate

Answer №4

Aside from rotating, you can also enlarge its size and adjust the parent div's overflow style to hidden - this will help cover the entire width when scaled up sufficiently.

div.parent {
  overflow: hidden;
  height: 100vh;
  background-color: lightblue;
}

div.container {
  margin-top: 42px;
  transform: rotate(10deg) scale(1.2);
  background-color: red;
  height: 100px;
}
<div class="parent">
  <div class="container"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Safari is capable of rendering Jquery, whereas Chrome seems to have trouble

The code I am using renders perfectly in Safari but not in Chrome. Despite checking the console in Chrome, no errors are showing up. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="ht ...

javascriptjquerygoogle-chromesafari

Exploring the functionality of the PageIndicator for Wearable Technology

Exploring the Page Indicator within a Tizen Wearable Application for Gear S3 Frontier has been an interesting journey. Despite successful implementation with text content, adding controls to each section or incorporating background images has proven challe ...

htmlcssswipetizentizen-web-app

Ways to Activate a Modal Using a Hyperlink

One of the features on my Next.js page is a modal that can be triggered by clicking a button: <button type='button' onClick={() => setOpen(true)}> The modal component looks like this: <Modal id='demo' show={isOpen} on ...

htmlurlnext.jsmodal-dialogpopup

Footer division misbehaving

My goal is to add a footer to my website that includes a text field, but for some reason I'm encountering an issue with two of my divs not cooperating. You can observe this problem in this JSFiddle. Here is the CSS code for the footer: .footer { b ...

htmlcss

Having trouble getting jQuery .append() to behave the way you want?

I have created a code snippet to display a table like this: $("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr>"); $("#results").append("<tr><td>John</td><td>123123123 ...

javascriptjquerycss

Creating a responsive navigation menu using Bootstrap 4 by merging data from various MySQL tables

I am struggling to create a bootstrap 4 nav-menu using the provided SQL query and code snippets. Below are the tables: TABLE menu -------------------------------------- | id | title | url | | 1 | Home | index.php | | 2 | M ...

phpcssmysqlbootstrap-4navbar

Transfer data in scripts to dynamically load Ajax pages

Is there a way to send variables or parameters from the original page to a script tag on another page that is loaded using jQuery Ajax? Here are the scripts: Page 1 <script> $(function(){ $('#button').click(function(){ $.ajax({ type:"P ...

javascriptjqueryajaxparameters

Adding Proxy-Authorization Header to an ajax request

It's surprising that there isn't much information available online about this issue I'm facing. When attempting to include a proxy authorization in the header of my ajax call, I encounter some difficulties. If I send it as shown below, no er ...

javascriptajaxjqueryhttp-headers

What is the correct way to utilize Html.Raw(Json.Encode(Model))?

I'm facing an issue with encoding my MVC Model using the code snippet below. The alert message is returning a null value, which is confusing to me since this is a create form. The HTML code structure is as follows: @using (Html.BeginForm()) { @H ...

jqueryajaxjsonasp.net-mvcasp.net-ajax

What is the best way to apply the "active" class to a Bootstrap modal image that is sourced from a database

I have a gallery of thumbnails that are fetched from a database. When you click on a thumbnail, it opens in a modal window. I want to enhance this setup by adding a carousel feature so users can slide through the gallery images. The issue I'm facing i ...

phpjquerytwitter-bootstrapcarousel

Controller return 400 error after Ajax request

My Ajax call is pointing to a controller function: <script type="text/javascript"> $(document).ready(function () { $('#AddNote').click(function () { $('#AddNote').addClass("disabled"); ...

c#jqueryasp.net-web-api

What is the best way to hide the button when a user is viewing their own profile in an Angular application?

Each user has their own profile on the platform. A unique feature allows users to send messages by clicking a button when viewing other profiles. However, an issue arises where this messaging button also appears on a user's own profile. Is there a way ...

htmlangulartypescriptangular6

Loading screen for specific content within the current WordPress theme

I am trying to display a preloader only in the 'content' div, but it ends up hiding the entire page. The structure of the site is as follows: Title Menu Content (where I want the preloader) Footer I'm having trouble figuring out where exa ...

javascriptjquerycsswordpresspreloader

Displaying images on hover that were not initially incorporated into the project

I am currently developing a website where the content is not controlled by me and the incoming content is unknown, making it impossible for me to store images. My goal is to display the referenced image when a specific class is hovered over. For example: ...

jqueryhtmlimageonhover

"Troubleshooting a CSS problem with off-canvas layouts

I've created a page with divs that create a parallax effect on scrolling, you can view the demo here. However, I encountered an issue when adding a Foundations off-canvas menu - it prevents me from being able to scroll down. How can I resolve this an ...

javascripthtmlcsszurb-foundation-6

Can individual column searching be implemented in datatable on the server side?

I am facing some challenges with implementing column filters in datatables server-side. The filter columns are visible but do not seem to be functioning properly. I have reviewed various resources such as the links provided below, but I still cannot resolv ...

jquerycodeigniterdatatables

Guide on syncing Bootstrap 4 sliders using a single set of controls

Is it possible to synchronize a bootstrap 4 carousel with controls to a carousel without any controls? 1) When the control arrows are clicked, both carousels will slide simultaneously. 2) Hovering over either carousel will pause both carousels from slidi ...

javascripthtmlcssbootstrap-4

Is there a Joomla extension available that can display or conceal content upon clicking?

Looking to enhance my Joomla site by installing a plugin that allows me to toggle the visibility of content with a click, similar to how FAQ sections work on many websites. Question 1 (click here for the answer) { Details for question 1 go here } Questi ...

phpjavascripthtmlcssjoomla

Find the current location of the scroll bar on the view port

Currently, I am utilizing the Addazle React grid for my project. However, I need to incorporate endless scrolling functionality which is not already included in this grid system. Thus, I am tasked with devising my own solution for this issue. To successful ...

javascriptjqueryhtmlcssreactjs

Is there a way to prevent Vetur from automatically converting colSpan and rowSpan tags?

Currently, I am utilizing nativescript-vue and I require the colSpan and rowSpan tags to remain unchanged. The code formatter in Vetur changes rowSpan="2" to rowspan="2". Is there a way to deactivate the automatic lowercasing feature o ...

htmlvisual-studiovue.jsnativescriptvetur