CSS transform: applying the same CSS to multiple divs results in a variety of different outcomes

I am working on creating multiple parallelograms with the same skew aligned horizontally. While the first one looks perfect, additional divs seem to increase the skew more and more. I even attempted this using images and applying transform: rotate() but encountered the same issue.

Currently, I have a class set up to generate these parallelograms.

CSS:

.parallelogram-1 {
  width: 30px;
  height: 45px;
  margin: 0px 40px;
  border-left: 1px solid #000;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  background: red;
}

HTML:

<div id="para">
  <div class="parallelogram-1">
  <div class="parallelogram-1">
  <div class="parallelogram-1">
</div>

Here's a fiddle

Any assistance you can provide would be greatly appreciated! ;-)

htmlcss

Answer №1

Make sure to properly close all your HTML div tags.

<div id="content">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>

Check Out Updated Fiddle

Answer №2

Your div elements are becoming distorted because you have not properly closed the preceding ones. Make sure to close each div element like this:

<div id="para">
  <div class="parallelogram-1"></div>
  <div class="parallelogram-1"></div>
  <div class="parallelogram-1"></div>
</div>

Answer №3

It appears that the issue is simply forgetting to include </div> at the end of each declaration!

<div id="para">
  <div class="parallelogram-1"></div>
  <div class="parallelogram-1"></div>
  <div class="parallelogram-1"></div>
</div>

Answer №4

It appears that you forgot to close your divs properly. If you intended for them to be displayed side by side, remember to use inline-block or they will stack on separate lines.

Check out the HTML below:

<div id="para">
  <div class="parallelogram-1"></div>
  <div class="parallelogram-1"></div>
  <div class="parallelogram-1"></div>
</div>

Take a look at the CSS code as well:

.parallelogram-1 {
  display: inline-block;
  width: 30px;
  height: 45px;
  margin: 0px 3px;
  border-left: 1px solid #000;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  background: red;
}

For a live demonstration, visit the following fiddle link:

http://jsfiddle.net/0u14evtx/8/

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

Problem with the appearance of the drop-down menu

After a few dedicated weeks on a Web application project, I am currently tackling the challenge of a drop-down menu. Despite its functionality, there are two specific points I need help with: When expanding the menu by selecting a main item, I want to pr ...

jqueryhtmlcss

Struggling with the adaptability of my website's footer section

I'm facing a dilemma... No matter what I do, I can't seem to position my contact form over my Google iframe perfectly. It works fine if I don't mind sacrificing responsiveness, but as soon as I try to make it responsive, the absolute assign ...

htmlcssformsiframeresponsive

Utilizing CSS grid to center one specific div, while aligning the remaining divs on the subsequent line

I need to create a pyramid structure within a parent div utilizing 4 child divs. The first child should be centered, with the remaining children positioned below in a second row. <style> .parent { width: 100%; display: grid; grid-template-co ...

htmlcsscss-grid

Tips for Excluding Content Retrieved Through file_get_contents?

Currently, I am storing the source code of a webpage in a variable called $html using the following line: $html = file_get_contents('http://www.google.com'); When I use <textarea><?php echo htmlentities($html); ?></textarea> ...

phphtmlfilefile-get-contents

Dynamic navigation menu shifting when bolded

Looking at my menu, you'll notice the following layout: If one clicks on Recruitment in the menu, it correctly bolds the text as intended. However, an issue arises where the entire menu unexpectedly shifts 1 or 2px to the left. The menu is implemente ...

xhtmlmenudotnetnukecss

Cross-Origin Resource Sharing (CORS) for HTML

Here is a code snippet I found on http://jakearchibald.com/scratch/alphavid/ $("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; ...

javascripthtmlhtml5-videocors

Is there a way to ensure that my slideshow images maintain their proportions when viewed on various screen sizes?

I came across a code snippet for an image slideshow that I really liked, but it didn't resize properly on different browser sizes. Initially, I attempted to use the vh property to address this issue, but unfortunately, the images wouldn't scale p ...

htmlcssslideshowscaling

The first-child and last-child selectors are not working properly in the CSS

In the family of elements, the first child should proudly show off the image icon for home while the last child remains humble without any background imagery: Check out the evidence here: http://jsfiddle.net/gUqC2/ The issue at hand is that the first chi ...

css

Discover the secret to toggling Bootstrap 4 cards visibility when hovering over the navigation menu using CSS

Hey, I'm currently working on a project where I want to show and hide specific sections of cards by just hovering over the menu list. While I can successfully hide the cards using CSS, I am facing issues with displaying them using the display:block pr ...

javascriptjqueryhtmlcssbootstrap-4

Position the checkbox to the left of the label

I currently have a checkbox with ripple effects. The label text is displayed before the checkbox in the code. However, I'd like to change the order so that the checkbox comes before the label text. Occasionally, the entire div expands and contracts. ...

htmlcss

Trouble embedding iframes in local files?

I have recently created a file which includes the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> <style> iframe { height: 500px; width: 600px; } ...

javascripthtmliframe

Retrieving custom attribute values during a drop event in Jquery drag and drop operations

I'm currently working on a moodboard creator, but I've hit a snag while trying to transfer the values from custom attributes of an image to a new div once the drop action is completed. Every time the drop is finished, it always fetches the value ...

jqueryhtml

Arranging Divs next to each other, ensuring uniform column heights, within a ContentPlaceHolder in ASP.NET

I am attempting to create a layout with three columns. The left and right columns will each contain a button that should remain aligned with the outer border of the container. In the center column, there will be an asp:Table generated dynamically, ranging ...

asp.netcsshtmlvertical-alignment

Display additional text when hovering over an object

Is there a way to make my text expand and display all of its content when hovered over, especially for those sections that are longer than the div size? I currently have some code implemented, but it seems to reveal the text horizontally. I am looking fo ...

htmlcss

Using jQuery to validate the existence of a link

Within my pagination div, I have links to the previous page and next page. The link to the previous page is structured as follows: <span id="previous"><a href="www.site.com/page/1" >Previous</a>. However, on the first page, there will be ...

javascriptjqueryhtmlcss

What are the steps to transforming shorthand CSS into longhand?

Is there a tool available that can automatically convert shorthand CSS to longhand? I am in need of this functionality because I would like to utilize SmartSprites, which is not compatible with shorthand formatting. Additionally, if there is a tool that c ...

csscss-sprites

What is the best way to incorporate audio playback while browsing files on an HTML5 webpage with TypeScript?

<input type="file" id="soundUrl" (change)="onAudioPlay()" /> <audio id="sound" controls></audio> This is the HTML code I'm working with, and I'm looking to trigger audio playback after a user selects an MP3 file using TypeScrip ...

angularhtmltypescript

What is causing my AJAX function to malfunction and throwing an exception for undefined data objects?

I am having trouble with my ajax query in my code. Even though it is returning the required data, it is not displaying properly within the HTML code. I have a common header and footer (PHP) for all other files. Despite my efforts to resolve this issue by s ...

javascripthtmljqueryajax

Does adding the Angular bootstrap script at the end of the body tag impact webpage speed more than using ng-app on the body tag?

In the past, we had placed ng-app on the body tag which led to problems with dependency injection when multiple modules were being used on the same webpage. This required module creators to be aware of the existing app and inject their app into it. We are ...

javascriptjqueryhtmlangularjstwitter-bootstrap

How can I address the variations in CSS appearance between Firefox and Google Chrome?

I'm currently working on a table with two cells in each row just for fun. For the first row, I want both cells to display the same picture. To achieve this, I wrote the following CSS: tr:nth-child(1){ background-image:url("cat.jpg"); background-size: ...

htmlcssgoogle-chromefirefox