I'm having trouble figuring out how to create multiple parallelograms horizontally with some space between them using CSS. Is there a way to modify the code below for this purpose?
Here is the HTML:
<div id="parallelogram"></div>
And here is the CSS:
#parallelogram {
width: 20px;
height: 60px;
margin: 0 0 0 20px;
-webkit-transform: skew(-11deg);
-moz-transform: skew(-11deg);
-o-transform: skew(-11deg);
-ms-transform: skew(-11deg);
background: #0272a7;
}
in summary
float:left;
This CSS rule will arrange the elements horizontally, instead of stacking them vertically. Additionally, I used a classname to style multiple rectangles as per your request.
I made certain assumptions about your requirements. You can view the implementation in this example link to confirm if it meets your needs.
To ensure proper alignment, employ the inline-block property.
.parallelogram {
width: 20px;
height: 60px;
margin: 0 0 0 20px;
-webkit-transform: skew(-11deg);
-moz-transform: skew(-11deg);
-o-transform: skew(-11deg);
-ms-transform: skew(-11deg);
background: #0272a7;
display:inline-block;
}
Opt for using a class over an id
<div class="parallelogram"></div>
<div class="parallelogram"></div>
<div class="parallelogram"></div>
<div class="parallelogram"></div>
CSS -
.parallelogram {
width: 20px;
height: 60px;
margin: 0 0 0 20px;
-webkit-transform: skew(-11deg);
-moz-transform: skew(-11deg);
-o-transform: skew(-11deg);
-ms-transform: skew(-11deg);
background: #0272a7;
float: left;
}
Alternatively, you can use display: inline-block
.parallelogram {
width: 20px;
height: 60px;
margin: 0 0 0 20px;
-webkit-transform: skew(-11deg);
-moz-transform: skew(-11deg);
-o-transform: skew(-11deg);
-ms-transform: skew(-11deg);
background: #0272a7;
display: inline-block;
}
View the live example in this FIDDLE
Is there a way to align buttons on a modal side by side? One button is a download link and the other a mirror link. I attempted to use a custom class with CSS property "display: inline-block;" but it did not work as expected. Any suggestions on how to achi ...
When working on my-app.html ... <paper-icon-button icon="my-icons:menu" onclick="this.$._joesDrawerToggle()"></paper-icon-button> ... <script> Polymer({ is: 'my-app', ... _showPage404: function() { thi ...
I've been attempting to implement the bubble function into my scene to generate a sphere, but unfortunately nothing is showing up. Even when I try creating a sphere without using the bubble function, it still doesn't appear in the scene. func ...
On a simple webpage using bootstrap and js/jquery, data is fetched via ajax to create entries displayed to the viewer. The process involves: - making a request - parsing XML to create an array of objects with all the data - sorting by one property - cr ...
I am looking to dynamically adjust the height of child divs within a fixed-height parent div. The parent div's height is fixed, but the number of child divs can vary. I want each child div to have a height equal to the parent div's height divided ...
To achieve the desired effect, you may need to use some javascript. Visit aditagarwal.com for more information. Styling with CSS: .images-wrapper{ position: fixed; left: 0; top: 80px; bottom: 0; width: 100%; height: 100vh; an ...
Whenever I check a checkbox and then click on another checkbox, I don't want the initially checked checkbox to be unchecked, but rather a different one... For example: If I check checkbox 1, only checkbox 1 is checked; If I check checkbox 2, both ...
In my JavaScript and HTML5 course, I am working on developing a website where users can choose the background color and decide between using SANS SERIF or SANS fonts. The background color selection feature is already functioning successfully -- var inputC ...
I have been encountering an application error in my android phonegap app. The issue arises when I transition from one page to another page, resulting in the following message: "A network error occurred.(file:///android_asset/www/home/home.html?userid=91 ...
I am looking to rearrange the order of some items on my page using JS or CSS. The project I am working on is written with ReactJS. Here is the basic structure: <div class="parent"> <form> <div class="header"></di ...
My website is built using Yii along with YiiBooster. Everything works fine when I am in DEBUG mode - all styles load and apply correctly. However, when I set YII_DEBUG to false in the index.php file, the CSS files still show as loaded in Firebug, but it ap ...
After resizing the window, here's the desired outcome I am aiming for: https://i.sstatic.net/FdQKg.jpg The issue with this result is the lack of centering. When I attempt to center them, it leads to a problematic layout as shown here: the problem. I ...
I am currently designing a website that includes a login form and I am in the process of uploading it to a web hosting service In order to activate my login form, I have to use node index Is there a way to change the destination of this tag: <li class ...
Currently, I have set up three images (1.jpg, 2.jpg, 3.jpg) along with an image using the code: <img id="add" src="1.jpg"></img>. The width, height, and position of this additional image are adjusted as needed and are functioning correctly. Fur ...
I have a requirement where I need to display the last two li elements from an ul list on a new line if the screen width is less than 625px. The code snippet below achieves this functionality: ... ... ... ... However, this code fails valida ...
Below is the content of my main.css file: body { font-family: josefin; } .splash-content { text-align: center; } .register-button { color: #6A136C; width: 300px; height: 100px; border: 5px solid #6A136C; } .btn { padding: 1 ...
Looking for a JavaScript code that can animate vertical black bars of a specific width moving over a white background. The desired outcome is similar to the video found at: https://www.youtube.com/watch?v=bdMWbfTMOMM. Thank you. ...
I am currently working on creating a dynamic full screen background that responds to the movement of the mouse. The idea is that as you move the mouse around, the background image will shift accordingly. For instance, if you were to move the mouse to the ...
I am looking to enhance my website by implementing a feature where a video will play when a button is clicked, and then another video will smoothly fade in while fading out the current video upon clicking a different button. This transition should dynamica ...
I am in the process of creating a website using Angular to showcase my music, and I am looking for a script that will pause other audio players when a new one is played. Does anyone have a solution for this? HTML <div> <img src="{{ image }}" a ...