Rotate a shape to form a Rhombus at the center

I used the transform CSS property to create a rhombus, but I noticed that the center point of the shape is off-center to the right rather than in the middle. Can anyone help me figure out how to fix this issue?

You can view my code here.

.rhombus{
 width:100px; 
 height:100px; 
 background:black;
margin:0 auto;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 -o-transform-origin: 0 100%;
 transform-origin: 0 100%;
}
htmlcssrotationtransformcenter

Answer №1

Check out the demo here

To achieve the desired effect, you can use the following CSS:

transform-origin: center;

Here is the CSS code snippet:

.rhombus{
     width:100px; 
     height:100px; 
     background:black;
     margin:0 auto;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
     -webkit-transform-origin: center;
     -moz-transform-origin: center;
     -ms-transform-origin: center;
     -o-transform-origin: center;
     transform-origin: center;
}

If you prefer an absolute centering solution, you can check out the demo by clicking on the link below:

CSS for absolute centering:

.rhombus{
     width:100px; 
     height:100px; 
     background:black;
     margin:auto;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
     -webkit-transform-origin: center;
     -moz-transform-origin: center;
     -ms-transform-origin: center;
     -o-transform-origin: center;
     transform-origin: center;
}

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

How can I utilize jQuery to iterate through every anchor tag on an HTML page?

I am looking to reference all anchor tags on the page that have a parent h2 tag. To achieve this, I need to iterate through each anchor tag that has a parent h2 and add an attribute using jQuery. <body> <h1>not me</h1> <a href ...

javascriptjqueryhtmlcss

What is the best way to display tip boxes for content that is added dynamically?

One of the challenges with my web page is that dynamically added content does not display tipboxes, unlike items present since the page load. I utilize the tipbox tool available at http://code.google.com/p/jquery-tipbox/downloads/list. To illustrate the i ...

javascriptjqueryhtml

How can we call a function in HTML from an external JavaScript file?

I am attempting to utilize a function that I have defined in my .js file within my HTML document. js/newsalerts.js function decodeHTML(html) { //https://stackoverflow.com/a/2989105/4650297 var tempDiv = document.createElement("DIV"); tempDiv. ...

javascripthtmlflask

Using the Twit package on the client side: a step-by-step guide

I have been utilizing the Twit package for searching tweets. After executing the js file in the console, I am able to see the tweets but when trying to use them on my webpage, an error 'Uncaught ReferenceError: require is not defined' pops up. Th ...

javascripthtmlapitwittertwitter-oauth

Currently focusing on improving the responsiveness of the navigation bar and grid layout

I'm facing a new challenge I can't seem to crack: Despite setting my grid boxes to be responsive with 1fr column and (6, fr) row, they are displaying poorly on mobile devices. Additionally, my navbar remains fullwidth and mobile-like even when i ...

htmlcss

How can I create responsive buttons with icons using material-ui?

I'm working with a material-ui Button that has a startIcon, and I need to hide the button text on smaller screens while still showing the icon. One common solution would be to use the useMediaQuery hook to identify the browser size and render a diffe ...

cssreactjsmaterial-ui

When you click, a new webpage opens within my website, similar to the feature on Facebook

When using Facebook on mobile, clicking on a link to a person's website opens the website in front of the Facebook page. However, when users press the X in the top left corner, it deletes the webpage but keeps Facebook open. On my desktop computer, I ...

html

Div elements containing identical content and styled in the same manner exhibit distinct dashed borders

After designing a pen with a unique twist, you'll notice that the first div has a border-bottom, while the second has a border-top. What's interesting is that the border on the second div is not the same as the first. Visit this link to see for ...

htmlcssfirefox

Tips on concealing all classes except one through touch swiping

If you have a website with a single large article divided into multiple sections categorized as Title, Book1, Book2, & Book3, and you want to implement a swipe functionality where only one section is displayed at a time, you may encounter some issues. ...

javascriptjqueryhtmlcssswipe

Learn how to dynamically disable a button using jQuery within the Materialize CSS framework

While attempting to disable a button in Materialize CSS using jQuery, I encountered an issue. Despite following the documentation found here, it seems that simply adding the 'disabled' class does not automatically disable the button as expected. ...

javascriptjqueryhtmlcssmaterialize

Issue with fluid layout in CSS - Unable to specify height in pixels and minimum height property not functioning as expected

While working on a liquid layout, I have set all my width and height values in percentages. However, during the design process, I needed to check how my CSS was rendering so I temporarily set the height in pixels. Eventually, the height in percentage wil ...

css-floatcss

Inline CSS alignment

While experimenting with layout inline elements, I came across some unusual behavior. Can someone please explain why there is a difference? I have applied the following CSS to both HTML structures: .time { position: relative; top:100px; heigh ...

layoutcss

Navigating through tabs in a Meteor application: How to maintain the active tab when using the back button

I am working on a multi-page meteor application where each page includes a navigation template. To switch between pages, I am using iron-router. The user's current page is indicated by setting the appropriate navigation link's class to 'ac ...

javascriptcssmeteoriron-router

How to Create a DataTable Responsive Feature Where All Columns Collapse on Click, Except the Last One?

I am currently utilizing the DataTables library to generate a responsive table. I am aiming to create a feature where all columns in the DataTable can toggle between collapse and expand states when clicked, with the exception of the last column. Below is a ...

javascripthtmlcssdatatableresponsive

When you print, transfer HTML tags to a separate page

I need help with writing a report that pulls data from a dynamic database. I added code to force a page break after every second div tag, but since the content is constantly changing, some div tags end up spanning across pages when printed. Is there a way ...

htmlcss

Tips for implementing a document ready function on a nested page within a larger full-page website

I am currently working on a website that utilizes fullpage.js, but the same principle applies to all single-page websites. I am trying to figure out how to implement the $(document).ready() function on a 'nested' page within the site. Since every ...

javascriptjqueryhtmldocument-readyfullpage.js

Leveraging icons with Bootstrap 4.5

I am currently exploring how to incorporate Bootstrap 4.5 icons using CSS. Do you have any examples of code that could guide me on how to achieve this? I am specifically interested in understanding the required CSS declarations that would allow me to use t ...

javascriptcssbootstrap-4icons

Retrieve data quickly and navigate directly to specified div element on page

I am facing an issue with scrolling on my website. While it currently works fine, I would like to make the scrolling instant without any animation. I want the page to refresh and remain in the same position as before, without automatically scrolling to a s ...

javascripthtmljquery

Ways to capture all characters (including special characters like ) using Visual Studio Regex

What I'm Hoping to Achieve: I am looking to reformat multiple HTML files that have a similar structure in Visual Studio. While the HTML sections may vary in length, they all begin with a <div id="some_id"> tag and do not contain any other <d ...

htmlregexvisual-studiowildcard

Following the modification of the Context root, the JSP page is no longer functioning as expected

Recently, I developed a JSP page within the webapp that utilizes jquery, CSS, and Angular JS. The files jquery-1.12.0.js, angular.min.js, and TableCSSCode.css are all located in the same directory as the JSP page. Initially, my application context was set ...

jquerycssangularjsjspweb