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

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Can you help me with CSS3 animations triggered by scrolling? I came across a code that reveals a DIV element as the user scrolls down: <script type="text/javascript"> $(document).ready(function() { /* Every time the window ...

jquerycssanimationwebscroll

Arrange and display similar objects together

I have a list of items in a listView that need to be visually grouped based on their class, displayed within boxes. For example, I have 5 items with the following classes: <div class="1"></div> <div class="1"></div> <div class= ...

javascriptjquerycss

Searching for image labels and substituting the path string

Upon each page load, I am faced with the task of implementing a script that scans through the entire page to identify all image src file paths (<img src="/RayRay/thisisianimage.png">) and then add a specific string onto the file paths so they appear ...

javascriptjqueryhtmlarrays

Could you please provide me with the option to send a list of the

Is there a way to send output via email instead of displaying it in the following div: <div id="fullCalendar" ></div> After spending a whole night searching online, I couldn't find a solution. As I'm not very familiar with jQuery pr ...

javascripthtmlajaxfullcalendarfullcalendar-3

Is there a way to reference a different CSS class within another class?

Currently, I am working on creating a navbar using React. In this navbar, I have three components for the menu bar: text, logo, and buttons. The background color of the navbar is set to transparent, while the components are black by default. However, whe ...

cssreactjsstyled-components

What are the steps to customize the format of Vue3 Datepicker extensions?

Is there anyone who can lend a hand? I am currently using the Vue3 Datepicker and I have received a value that looks like this Thu Jun 23 2022 17:14:00 GMT+0700 (Western Indonesia Time) Does anyone know how to transform it into the following format? Thu, ...

htmlvue.jsvuejs3

What is the process for embedding JQuery within the <body> tags in Joomla 3.1?

I inserted the following code into my default.php file in Joomla 3.1. <?php JHtml::_('jquery.framework'); JFactory::getDocument()->addScript(JURI::root().'template/mytemplate/js/jquery.min.js'); ?> However, this code only pl ...

javascriptphpjqueryhtmljoomla

Arranging div containers with nested content

Within my application, I am dynamically displaying images side by side to users. Users have the ability to assign points to these images, and I would like to give them the option to sort the images based on points, with the highest points displayed first i ...

javascriptjquerysortinghtml

Tips on how to prevent certain classes from being impacted by a hue-rotate filter applied to all elements on a webpage

I am currently in the process of adding a feature that allows users to choose between a dark or light theme, as well as select a specific theme color for the app. The implementation involves using CSS filters such as invert(1) for the dark theme and hue-ro ...

javascripthtmlcss

Generating unique identifiers for ng-model in AngularJS

Issue - ng-model is not generating dynamically. I have dynamic input boxes and I am attempting to create ng-model dynamically like test[1], test[2], etc. However, when inspecting the form with Firebug, all input elements only show - test[shiftnumber]. HT ...

javascripthtmlangularjsangular-ngmodel

JavaScript can dynamically attach EventListeners to elements, allowing for versatile and customized event

I am currently populating a table using data from an XML file. One of the columns in the table contains links to more details. Due to the unique requirements of my web page setup (Chrome extension), I need to dynamically add an event handler when the table ...

javascripthtmldom-eventsaddeventlistenerevent-listener

Moving DOM Elements around

Objective: Looking to relocate an element within the DOM structure. Condition: Although I am familiar with using jQuery for this task, I am currently working in an environment without access to it. Therefore, I need a pure JavaScript solution. Example: ...

javascripthtml

Need help inserting an image into the div when the ngif condition is true, and when the ngif condition is false

Essentially, I have a situation where I am using an *ngIf condition on a div that also contains an image. This is for a login page where I need to display different versions based on the type of user. However, I'm facing an issue where the image does ...

javascripthtmlangularangular-ng-if

Tips for obtaining the accurate HTML code format using Angular 2's input feature:

I am looking to retrieve all the code with an input as [input] and a tag as #tag. When attempting to obtain HTML code with jQuery using console.log($("#content")[0].outerHTML);, this is an example of how the code looks: <div dnd-droppable [dropZones]= ...

htmltypescriptangular

The navigation bar buttons in my IONIC 2 app are unresponsive on both the

In Ionic 2 for Android, I encountered an issue with the title placement. To resolve this, I applied some CSS to center the title and added left and right buttons to the nav bar. However, when I tried to implement onclick functionality for these buttons, no ...

htmlcssangularjsionic2hybrid-mobile-app

Code not functioning properly in Internet Explorer

In one of my JavaScript functions, I have the following CSS line which works well in all browsers except for IE (Internet Explorer). When the page loads, the height of the element is only about 4px. element.setAttribute('style', "height: 15px;") ...

javascriptcssinternet-explorer

Setting the variable to global does not apply styling to the element

Looking for help with styling an element created using document.createElement("img")? let fireball; //global variable fireball = document.createElement("img") //variable on local fireballArray.push(someFunction(fireball, { src: "img.png&qu ...

javascripthtmlcssdomstyles

reverting the effects of a javascript animation

I am expanding the size of a carousel on a specific pane by adjusting its height and position. Here is how I achieve this: if(currentPane==2) { $("#carousel").animate({height:320},1000); $("#carousel").animate({top:411},1000); $("#dropShadow") ...

javascriptjquerycsshtml

Ways to tally elements that have been dynamically loaded onto the webpage through AJAX requests

My page has a dynamic region that is continuously updated using jQuery's .ajax and .load methods. In order to submit the form, there need to be at least 3 of these 'regions', so I have to keep track of the number of DIVs with a specific cla ...

javascriptjqueryhtmlajax

Discovering back-to-back days

I am currently working on a PHP script that utilizes a MySQL database to calculate various climatological parameters based on different variables. While I have successfully completed most of the calculations, there is one particular task that I am struggli ...

phphtmlmysql