Tips for designing a slantedDiv that is responsive

I am seeking to achieve a design similar to the image provided 

.slantedDiv
{
position: relative;
width: 100%;
height:500px;
background: #C57ED3;
box-sizing: border-box;
padding:30px;
color:#fff;
}
.slantedDiv:after
{ position: absolute;
width:100%;
height:100%;
content: '';
background:red ;
top:0;
right:0;
bottom:0;
left:0;
transform-origin: top left;
transform: skewY(4deg);

}
#image {
   
  margin-top: -20px;
}
<div class="slantedDiv" id="image" >
   hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</div>

Greetings, I have been attempting to create a responsive slanted div and incorporate text or paragraphs within it. Despite trying various solutions, the text consistently remains hidden behind the div instead of being visible. Any assistance would be greatly appreciated. Thank you in advance.:)

htmlcsstwitter-bootstrap-3bootstrap-4

Answer №1

To tackle this problem, I utilized z-index. Feel free to review the code snippet provided below.

.slantedDiv
{
position: relative;
width: 100%;
height:500px;
background: #C57ED3;
box-sizing: border-box;
padding:30px;
color:#fff;
  z-index: 10;
}
.slantedDiv:after
{ position: absolute;
width:100%;
height:100%;
content: '';
background:red;
top:0;
right:0;
bottom:0;
left:0;
transform-origin: top left;
transform: skewY(4deg);
z-index: -1;
}
<div class="slantedDiv" id="image" >
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</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

Using CSS to duplicate images in multiple repetitions horizontally

In the process of developing a UHD project that involves showcasing large images, I have encountered limitations with iOS and certain mobile browsers. While stationary browsers pose no issue, iOS only supports PNG images up to 5 megapixels in resolution, w ...

jqueryioscss

What is the best way to retrieve the value of a textbox in AngularJS?

Trying my hand at creating a basic web page using angular. I've got 2 textboxes and 2 buttons - one to set a predefined value in a textbox, and the other to add some text. Here's the code snippet: <!DOCTYPE html> <html lang="en" ng-app ...

javascriptjqueryhtmlangularjs

In Firefox, the focus outline is not shown on a div that has a mask-image CSS rule applied to

In my code, I have multiple div elements that have the mask-image and -webkit-mask-image CSS rules applied to them. These divs are being used as UI slider components, so I want keyboard users to be able to tab between them and use the arrow keys to adjust ...

cssfirefoxaccessibility

When using html-pdf-chrome to print to an A4 PDF, there appears to be a significant space below the A

In my Laravel project, I am currently utilizing the westy92 / html-pdf-chrome library to convert HTML to PDF. The front-end of my project is based on React. I have defined a series of divs to act as A4 pages: <div id="pdf" className="pri ...

phphtmlcssreactjspdf

Expanding a div's size with CSS to fill the remaining space

Here's the setup I'm working with: <div class="parent"> <div class="moverBoy"></div> <div class="smartBoy"></div> </div> The parent element is fixed at 100x20 indefinitely. moverBoy and smartBoy are al ...

javascripthtmlcss

Creating a Slack-inspired interface with a Bootstrap 4 fixed bottom message box nested within a column

I'm attempting to create an interface similar to Slack, featuring a message box fixed at the bottom using Bootstrap 4. However, when I use the fixed-bottom class (where my custom message-box col is located), it spans the entire width of the window, wh ...

htmlbootstrap-4

What is the best way to adjust the size of a DIV containing a background

Recently, I've been delving into the world of CSS3 and have encountered an issue where the height of a DIV does not adjust as the background image expands. Ideally, the DIV should expand along with the background image. Following the DIV, there will b ...

htmlbackground-image

Obtain a list from a Python code within an HTML page that has been web scraped

As a beginner in web scraping, I encountered a minor obstacle while working with the code below: import requests from bs4 import BeautifulSoup url = "www.website.com" page = requests.get(url) soup = BeautifulSoup(page.content, "html.parser") price_scripts ...

pythonhtmlweb-scrapingbeautifulsoup

Background image for input button in Internet Explorer 6

Can you create a custom background image for the input type="button" in Internet Explorer 6? ...

htmlcssinternet-explorercross-browser

Query CSS to target an empty array within the .data() method

I have a scenario where I am storing an array in a button using Jquery's .data() method. If the array happens to be empty, I want the button to appear in red color. How can I target the button with an empty array using CSS? var values1 = []; var ...

javascriptjqueryhtmlcss

Is it possible to nest HTML within a Route component?

<Router> <Routes> <Route path='/' element={<Navbar />} /> <Route path='/' element={<div className='recipes'> {query ? query.map((object, i) => ( <Recipe ...

htmlreactjsreact-routerreact-router-dom

The ongoing battle between Carousel full page image slider and multi div slider in Bootstrap 4

I need a full-page carousel image slider in one div container and a multi-div slider in another div container on my homepage. Unfortunately, due to some conflicting class names (such as carousel slide, carousel-inner, etc.), they are interfering with each ...

jqueryhtmlcssbootstrap-4

CSS: Strategies for eliminating empty cells within a grid layout by filtering out rows that contain partial or incomplete content

I am in need of creating a grid layout where each div is a specific width, and the number of rows depends on how many items there are. The twist is that I am unsure of the width of the outer container. My initial solution was to use CSS grid: #container ...

javascripthtmlcsscss-grid

What is the best way to establish a maximum limit for a counter within an onclick event?

I'm struggling to figure out how to set a maximum limit for a counter in my onclick event. Can someone help me? What is the best way to add a max limit to the counter of an onclick event? Do I need to use an if statement? If yes, how should it be w ...

javascripthtml

Utilize React JS to incorporate multiple instances of the Bootstrap carousel within a webpage using Reactstrap

I am having difficulty using the bootstrap carousel multiple times on a single page. I have attempted to copy it as a new item numerous times, but I keep encountering errors. <CarouselItem onExiting={() => setAnimating(true)} onExited={() => ...

htmlnode.jsreactjsbootstrap-4reactstrap

Using Jquery to implement autocomplete functionality by iterating over each item with the .each

I have been attempting to implement autocomplete using the .each() function. I am referring to the documentation on http://jqueryui.com/autocomplete/. You can view my attempt in this FIDDLE link where it is currently not functioning as expected. The scen ...

jqueryhtmlautocompleteeach

Learn how to use Bootstrap to style your buttons with centered alignment and add a margin in between each one

Looking to center four buttons with equal spacing between them? Here's what you can do: |--button--button--button--button--| Struggling with manual margin adjustment causing buttons to overlap? Check out this code snippet: <div id=""> ...

htmlcssbootstrap-5

Issues with displaying iframes on iOS devices, particularly iPhones

There is a strange issue I am encountering with iframes not displaying on certain phones while working perfectly on others. (They show up fine on all android devices) (However, they do not work on iphone 6 and 7 but surprisingly work on 7 plus, 7S, and a ...

ioscssiphoneiframe

Using regular expressions to extract information from HTML code with the JSoup library

I am working on extracting values from a web page source file using HTML rules that I currently have: e=d.select("li[id=result_48]"); e=d.select("div[id=result_48]"); Here are the relevant HTML tags: <li id="result_48" data-asin="0781774047" class="s ...

javahtmljsoup

Adjust the CSS to give <a> elements the appearance of plain text

Is it possible to style an anchor tag to appear identical to plain text? Consider the following scenario: <p> Here is some text and here is a <a class='no-link' href="http://www.example.com" >link</a></p> I have atte ...

htmlcss