Creating a diagonal rectangle with a flat bottom: A step-by-step guide

Hey there, I've encountered a little issue. I managed to create a diagonal shape on my webpage similar to the one shown in this image:

Now, what I'm aiming for is something like this:

I'm looking to achieve a shape resembling the one outlined by the blue dotted line. Despite my efforts to tweak and adjust the values of the initial shape, I haven't had any luck. Please note that the two shapes - the existing one and the one outlined by the dotted line - need to be distinct.

Hopefully, someone can assist me in achieving this. Additionally, it's crucial that there is no space between the bottom of the first shape and the one I intend to create.

Below is the HTML and CSS code for the current shape:

.BeginToday9 {
  text-align: center;
  font-size: 22px;
  padding-left: 425px;
  padding-right: 425px;
  background-color: #2ecc71;
  color: white;
  z-index: 1;
  -webkit-transform: skewY(5deg);
  -moz-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  -o-transform: skewY(5deg);
  transform: skewY(5deg);
}

.BeginToday9>.wrapper {
  -webkit-transform: skewY(-5deg);
  -moz-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  -o-transform: skewY(-5deg);
  transform: skewY(-5deg);
}
<div class="BeginToday9" style="height: 500px; text-align: center; margin-top: 0;">

</div>

Best regards, Satanshu Mishra

htmlcss

Answer №1

Below is an example that aligns with your request. Note that the second shape is simply another rectangle that has been positioned underneath the skewed rectangle. https://codepen.io/johndoe/123abc

HTML

<div id="container">
<div id="shapeA">
</div>
<div id="shapeB">
</div>
</div>

CSS

#shapeA {
    background-color: #FF5733;
    height: 250px;
    padding: 10px;
    position: relative;
    transform: skewX(7deg);
    z-index: 2
}
#shapeB {
    background-color: rgba(0, 0, 255, 0.7);
    border: 3px dashed red;
    height: 350px;
    position: relative;
    top: -120px;
}
#container {
    position: relative;
    top: 120px;
}

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

Combining several position-aligned classes into a single div instead of each having their own individual div

http://jsfiddle.net/58arV/ Trying to create a question component where users can choose the correct answer out of 4 options. I planned to use 4 input styles with a checkmark "radio" DIV on the right. When a user clicks on an option, it should display a c ...

jqueryhtmlcsstwitter-bootstrap

Include a scroll bar for menu items that contain submenus, while ensuring that the submenu items remain visible

Looking for a way to add a scrollbar to the courses menu list due to its excessive length (refer to the image below). The fixed top navbar prevents scrolling, making it necessary to implement a scrollbar within the menu itself. After applying the followin ...

jqueryhtmlcssmoodle

What is the Best Way to Create a Form Inside a Box?

Hello there! I am trying to create a form underneath the box labeled "New Referral," but I'm having trouble figuring it out. I would like to include sections for first name, last name, date of birth, phone number, email, and address under the box. Any ...

htmlcss

display child element at full width within a parent element that is not full width

I have a container with a maximum width of 1024px, and I want one of its child elements to take up 100% width starting from the left edge of the screen. Is there a way to achieve this without adding extra HTML markup? I know I can make the child element 1 ...

htmlcsswidth

The lower text box on the page being covered by the virtual keyboard on IOS

Our website features a fixed header and footer with scrollable content. We have 20 text boxes on the page, but the ones at the bottom, like Zip and Telephone, are obscured by the iOS virtual keyboard that appears when a text box is clicked. If we could d ...

javascripthtmlioscss

Display the HTML code in its formatted text output

I am currently facing an issue while trying to take input from the user using the WYSIWYG text editor plugin. When I attempt to display the text in a label or paragraph, all the HTML tags become visible. For instance, @string str = "<b>sample text&l ...

html

The font weight is failing to take effect

I'm having an issue with the font-weight in my CSS. On my website, I'm trying to decrease the font-weight but even the lightest weight (100) looks too heavy like this: https://i.stack.imgur.com/6dwFa.png However, I want it to look more like this ...

htmlcssreactjsfonts

The functionality of Angular animate becomes compromised when there is a conflict between predefined CSS states and transition states

Explore this example CSS code: /* animations at the start */ .error-animation.ng-enter { -webkit-transition: 0.5s linear all; transition: 0.5s linear all; opacity: 0; } ...

javascriptcssangularjsanimationng-animate

Disable or set input text to read-only in Internet Explorer 9 and earlier versions using JavaScript or jQuery

Can anyone offer any suggestions on how to accomplish this task? I attempted using JavaScript with the code below, but it did not yield the desired results. element.readOnly="true"; element.readonly="readonly"; element.disabled="disabled"; I also tried ...

javascriptjqueryhtmltextinput

How can the hreflang tag be used correctly in a React application that supports multiple languages?

I have a React application with 3 pages(routes) and I support 2 languages (English and Spanish). Should I insert the following code into the <head></head> section of the public\index.html file like this? <link rel="alternate" ...

javascripthtmlreactjsseohreflang

Is it possible to resize an object using JavaScript?

Is it possible to change the size of an object when loading specific data by clicking on navigation? <object id="box" width="250" height="250" data=""></object> Although the JS code loads the data, it does not change the size. document.getEl ...

javascriptjqueryhtmlcss

Why should one incorporate semantic markup into their HTML documents?

During my studies, I learned that tags provide a definition to content in HTML. For example: <section>It's a section</section> <article>It's an article</article> By correctly using semantic markup in my HTML, the documen ...

htmlw3c-validationsemantic-markup

Step-by-step guide to positioning an iframe with 'transform:scale' on the left side

Recently, I encountered an issue with an iframe in my project. Initially, without any 'transform:scale' css applied, it displayed on the top-left side of the div as expected. However, after adding -webkit-transform:scale(0.6,1); margin-left:0.0e ...

htmlcssiframe

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

javascripthtmlcssajax

How do you specifically apply an Inset Border Shadow to just two sides using CSS?

Is it possible to apply the inner shadow specifically to the bottom and right sides? I've come across some hacks, but they seem to be more focused on regular border shadows. It's easier to add a drop shadow than to remove an inner shadow. -moz-b ...

css

Using d3.js to dynamically change the color of svg elements based on their data values

I was searching for a way to dynamically color SVG rectangles based on values from a dataset. If I were to create rectangles for each data entry, how could I adjust the rectangle's color according to the data value? Here is what I currently have: // ...

javascripthtmlcssd3.jssvg

What are some ways I can ensure my webpage remains consistent and user-friendly when scrolling, rather than appearing distorted and jumbled?

Is there a way to automatically scroll my page when the window is at a small height, instead of adjusting it to the height by squeezing it? I've tried using overflow in different ways, but haven't been successful in getting the entire page to scr ...

css

Utilize the CSS content property to embed an image without causing it to distort in size

Struggling to swap out one image for another without stretching it? In my demo, I replaced an elephant with a lion using only CSS - no changes allowed to the HTML. Unfortunately, the lion image ends up stretched. Even adding background-size: cover doesn&ap ...

htmlcss

Pressing Ctrl + S enables you to preserve the webpage for future

Is there a way to save an entire webpage, including all the HTML files, using Ctrl + S in Chrome? I have tried two different methods for saving the page, but so far, neither of them has worked: from selenium import webdriver from selenium.webdriver.common ...

pythonhtmlseleniumsave

Struggling with eliminating the bottom margin on your website?

I can't figure out where this mysterious margin is coming from in the CSS - there's a consistent 30px of space at the bottom of each web page. Any assistance would be greatly appreciated. I know it's probably something simple, but my brain ...

htmlcss