Div content with a unique angle

I need to create a website with slanted div elements that must meet the following criteria:

  1. The sections should have a height of approximately 400px when displayed side by side, and about 800px when they stack vertically. It would be ideal if this could adjust automatically based on the content inside.
  2. They must be angled downwards at a fixed 7-degree angle.
  3. Full width of the screen.
  4. Should support an image background in addition to solid colors.

Example:

https://i.sstatic.net/DaNBY.png

Here's the code snippet I've tried so far:

.centeredContent{    
    transform: rotate(7deg) translateY(-50%);
    -ms-transform: rotate(7deg) translateY(-50%); 
    -webkit-transform: rotate(7deg) translateY(-50%);
    top:46%;
    position:absolute;
    background-color:rgba(120,0,0,.0)
}

.rotateBack {
    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Safari */
    transform: rotate(-7deg);
    background-color:rgba(0,120,0,.0)
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="div1" style="background-color:rgba(77,77,77,.2); position:relative;overflow:hidden;">  
    <div id="content1" class="centeredContent">
        <div class="row" >
           
            <div class="col-lg-offset-1 col-md-4 rotateBack">
                <h2 style="color:#8aada8">topic 1</h2>
                <p>Lorem...</p>
                <button style="width:185px;height:52px;">Learn More</button>
            </div>
            <div class="col-lg-offset-2 col-md-4 rotateBack">
                <h2 style="color:#8aada8">topic 2</h2>
                <p>Lorem ...</p>
                <button style="width:185px;height:52px;">Learn More</button>
            </div>
        </div>
    </div>
    <div style="background-color:rgba(0,0,100,.0);overflow:hidden">
        <svg width="100%" id="svg1" style="margin:0;padding:0px;" viewBox="0 0 1590 600">
            <polygon id="polygon1" points="0,0 0,400 1590,600 1590,200" style="fill:#525252;stroke:#525252;stroke-width:0" />
        </svg>
    </div>
</div>

However, I'm facing an issue where the gray bar doesn't adjust properly to the content size. Any suggestions on how to fix this?

htmlcssrotation

Answer №1

To fix the issue, simply include the attribute "width:100%" in your existing "centeredContent" class. This should resolve the problem for you. Thank you for reaching out.

Answer №2

To make the gray bar resize based on your content size, using SVG may not be the best approach. Instead of SVG, I have eliminated it and enclosed the content in a div that is rotated in the same manner as before.

The width is adjusted to 120% so that the div's edges are concealed by its container. Now, the div adjusts to the height of the contained content and expands when the content is stacked.

.box {
  width: 100%;
  height: auto;
  background-color:rgba(0,0,100,.0)
}

.centeredContent {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(7deg);
  transform-origin: 0 0;
  position: absolute;
  background-color: #525252;
  width: 120%;
  padding: 40px 150px;
}

.rotateBack {
  transform: rotate(-7deg) translateY(-10%);
  margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="box">

  <div id="content1" class="centeredContent">
    <div class="row">

      <div class="col-lg-offset-1 col-md-4 rotateBack">
        <h2 style="color:#8aada8">topic 1</h2>
        <p>Lorem...</p>
        <button style="width:185px;height:52px;">Learn More</button>
      </div>

      <div class="col-lg-offset-2 col-md-4 rotateBack">
        <h2 style="color:#8aada8">topic 2</h2>
        <p>Lorem ...</p>
        <button style="width:185px;height:52px;">Learn More</button>
      </div>

    </div>
  </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

The process of transmitting messages back and forth between a popup script and a content script

I am in the process of developing a Chrome extension that involves sending data requests from a popup script to a content script (via a background script), analyzing the request on the content script, and then sending back a response (again through the bac ...

javascriptjqueryhtmlgoogle-chrome-extension

Adjust hover effects based on true conditions

Currently working on a web app using HTML, CSS, JavaScript, and AngularJS. Progress so far includes a clickable box that triggers a javascript function to display more boxes upon click using ng-click. <div ng-click="!(clickEnabled)||myFunction(app)" cl ...

javascripthtmlcssangularjsangularjs-ng-click

Switching between different views in Angular UI-router by selecting one UI-view over another

On my page, I have set up 2 ui-views. The top view contains a form and some controls, while the bottom view initially displays a few tables but should change based on the user's actions in the top view. I chose to keep this initial setup within a sin ...

htmlangularjsangular-ui-router

What is the best way to delete the pipe separator from the initial item in a list on the line?

I have a list of items separated by pipes that spans multiple lines. I am looking to use jQuery to remove the pipe separator for the first item on each line. Example: Red | Green | Blue Purple | Black | White Violet | Yellow | Magenta Here is the code ...

jquerycss

Does strip_tags() have vulnerabilities to scripting attacks?

Has there been any known XSS or other attack that can bypass the following code snippet? $content = "some HTML code"; $content = strip_tags($content); echo $content; This function does not modify any attributes on the tags that you allow using ...

phphtmlsecurityxssstrip-tags

Django's background image remains static regardless of CSS changes

I recently downloaded an HTML template and am attempting to customize it by changing the background image within the CSS file. The current code in the CSS file is as follows: background: url(../img/background.jpg) Despite my efforts to replace it with t ...

pythoncssdjangopython-3.xstatic

One method I use to retrieve ajax data and assign it before rendering the view

Despite putting the ajax.get in the created function, I am still unable to retrieve the ap_name value. This issue is related to vue.js created: function () { ajax.get('/envs').then(function (res) { this.apName = res.AP_NAME; ...

javascripthtmlvue.js

I am having trouble understanding why dropdown menus with the same content have varying widths

My issue is illustrated in the screenshots below: first-dropdown: second-dropdown: The second dropdown appears slightly wider on the right side. Despite Google Chrome's claim that the widths are the same. HTML code: <div class="row menu"> ...

htmlcsstwitter-bootstrap

Sending data from Node.JS to an HTML document

Currently, I am working on parsing an array fetched from an API using Node.js. My goal is to pass this array as a parameter to an HTML file in order to plot some points on a map based on the API data. Despite searching through various answers, none of them ...

javascripthtmlnode.jsexpress

Navigate to a different web page within the body tag without changing the current URL by utilizing a hash symbol

I am working with two HTML files, index.html and about.html. My goal is to display the content of about.html within my index.html without navigating away from it. After observing many websites, I noticed that they often use #about in their URLs to dynamic ...

javascriptphphtmlcss

Simply modifying a custom attribute source using jQuery does not result in it being refreshed

Introduction: Utilizing jQuery.elevateZoom-3.0.8 to display zoomed-in images. The SRC attribute contains the path to the smaller/normal image The DATA-ZOOM-IMAGE attribute holds the path to the larger image used for zooming. Here is the HTML Code: ...

javascriptjqueryhtmlimageelevatezoom

The show-word-limit feature is malfunctioning on the element.eleme.io platform

After attempting to utilize the show-word-limit attribute of the input element, unfortunately the character count did not display. Below is the code snippet that was used: <el-input type="textarea" placeholder="Please input" ...

javascripthtmlvue.jsinputelement

Tips for incorporating JSON data into an HTML table

https://i.sstatic.net/WEdge.jpgIn an attempt to showcase JSON data in an HTML table, I want the schoolClassName value to be displayed as a header (th) and the first names of students belonging to that specific schoolClass to appear in a column beneath the ...

javascripthtmlarraysjsonreactjs

Populate a MySql database with 2 input values

I am facing an issue with inserting values into MySql from a table. When trying to insert two values, only one gets stored in the database and the other remains empty. Here is the structure of my MySql table: https://i.sstatic.net/yWLbO.png Below is the ...

phphtmlmysqldatabase

Get rid of the add to cart message and modify the button that says "add to cart" on Woocommerce

How can I modify the shopping cart page to remove the "has been added to your cart" text and replace the quantity and add to cart button with a custom button (my image)? Here is an example of what I am trying to achieve: This is the current state of the p ...

phpcsswordpresswoocommercecart

Finding attributes with spaces in their values using XPath

Is there a way to select an attribute with spaces in xpath? I am currently trying to select a checkbox attribute named "checked type". I have experimented with //[@checked type], //[@checked-type], //[@checked_type], and //[@checked\stype], but none ...

pythonhtmlseleniumxpath

resetting the page's scroll position using a hamburger icon

After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation ...

htmlcss

Execute a jQuery focus() function on a textarea element within a dynamically added form on the webpage

Whenever I dynamically insert a new form onto the page using clone(), my goal is to have the textarea within the form automatically focused. However, despite trying out the code below, it seems like it's not functioning as expected: .on('click&a ...

javascriptjqueryhtmlfocustextarea

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create a ...

cssreactjscss-selectorsmouse-cursorcustom-cursor

What does the error message "Uncaught TypeError: Cannot access property 'style' of an undefined object" mean?

I've been attempting to execute the code below, but I keep encountering an error. I even tried including document.addEventListener('DOMContentLoaded', (event) => yet it still doesn't work. Interestingly, there are no errors if I run ...

javascripthtmlcssreactjs