What's the best way to angle this trapezium towards the left side?

I want to give this trapezium a left tilt. I am not sure how to achieve this effect.

Below is the code I'm working with:

* {
     margin: 0;
     padding: 0;
     background-color: white; 
  }
    
  /* creating the trapezium shape*/
  .trapezium {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     height: 0;
     width: 150px;
     border-bottom: 150px solid yellow;
     border-left: 100px solid transparent;
     border-right: 100px solid transparent;
  }
<div class="trapezium"></div>

htmlcss

Answer №1

If you input a negative value for the number of degrees, the additional transform rotate will incline to the left.

By default, the rotation occurs around the midpoint (transform-origin: 50% 50%). However, if you desire it to rotate around another point - in this case, referred to as 'tilt' - you can specify a different origin like transform-origin: 0% 100%, demonstrated in the code snippet below.

Feel free to experiment with various degree values and origins to achieve the desired outcome.

* {
     margin: 0;
     padding: 0;
     background-color: white; 
  }
    
  /* creating the trapezium shape*/
  .trapezium {
     position: absolute;
     top: 50%;
     left: 50%;
     transform-origin: 0% 100%;
     transform: translate(-50%, -50%) rotate(-15deg);
     height: 0;
     width: 150px;
     border-bottom: 150px solid yellow;
     border-left: 100px solid transparent;
     border-right: 100px solid transparent;
  }
<div class="trapezium"></div>

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

Having trouble loading external CSS in HTML?

I have been attempting to load an external CSS file into my current HTML file without success. I have provided images showcasing the code: View the code here See the output here Currently, I am working on Windows and using Aptana Studio 3 as my IDE. ...

htmlcss

Dealing with numerous forms within a single function in Django views

Managing two forms within a single function: Web Page Content <form name="selectgenderform" method = "POST"> <select name='gender'> <option>Male</option> <option>Female</option> </select> & ...

pythonhtmldjangoview

Customizing div elements in various RMarkdown documents with a CSS file

I want to apply styling to divs in various RMarkdown files using a CSS file. However, I am encountering syntax issues when trying to use the external CSS file to style the div. Embedding the style tag within the rmarkdown body works as shown below: --- ti ...

htmlcssrr-markdown

Is it possible to submit form data to multiple destinations in an HTML form submission?

I am in the process of developing a quiz application that consists of two essential files: question.php and process.php Within question.php, the user is required to input their answer in a textbox and submit it by clicking a designated button. This input ...

javascriptphphtmlforms

The media queries seem to be ineffective

Looking for some assistance here. I'm having trouble with my media queries not working as expected. Specifically, I'm attempting to adjust the padding on the navigation menu of my website. Despite setting up a media query to change the padding fo ...

cssmedia-queries

The appearance of Bootstrap-Navbar is altered when viewed on a mobile device

After creating a website that was compatible with both web and mobile devices, I encountered an issue where the navbar would not collapse on my smartphone. However, when I resized the browser window to match the size of the smartphone screen, it worked per ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

I am working on a project that involves allowing users to drag elements from a modal dialog and drop them onto the page. I have implemented a feature where dialog.close() is called once the user starts dragging. This functionality works perfectly on deskto ...

javascripthtmlcss

What are the steps to designing a footer or toolbar in an iPhone web application?

I am currently developing a web application and I am facing an issue where I need a div to remain fixed at the bottom of the screen, always visible. There is an example of what I want to achieve on this link: footer. However, it seems that this solution ...

iphonecssiphone-web-app

How to Toggle the Submit Button Using jQuery

I have implemented a feature using jQuery to disable the submit button and display a loading image. Here is how I have set it up: The HTML structure for the submit button looks like this: <div id="registerbtn" name="registerbtn"> <input typ ...

jqueryhtmlcssyii

How can I create a dashed border around a <div> element using HTML and CSS?

On Stack Overflow, I noticed that there are many DIV elements surrounded by dotted lines. How can this be achieved using CSS and HTML? Thank you, Bin ...

htmlcss

Creating dropdown options within a DataGrid in Form.IO: A step-by-step guide

I'm currently working with the Form.IO JS library to develop a new form. Within this form, I need to include a DataGrid containing 11 components. To ensure all components fit inline, I have applied the CSS rule overflow: auto (overflow-x: auto; overfl ...

javascriptjquerycssformio

The excessive repetition in Angular flex layout is becoming overwhelming

I discovered and started using the responsive API provided by angular flex layout. While most of the time it works as intended, there are instances where I find myself duplicating directives in the code. Here's a simplified example: <div> &l ...

cssangularangular-flex-layout

In every browser except for Safari on iPad, a white X is displayed in the grey box. I'm wondering if the error lies with me or with Safari

When using Safari on my iPad, I noticed that the white X appears on the right-hand side of the black screen. Since this is the only version of Safari that I have, I am unsure if this issue is specific to iPads, Safaris, or just my device. Visit this link ...

htmlcssiosipadsafari

Controlling CSS Styles in Angular using TypeScript

Currently, I am working on an Angular project that involves dynamically populating a calendar. In addition to this, I have a range of dates and the task at hand is to modify the background for specific days within this date range. To manage dates effective ...

cssangulartypescriptmomentjs

Position group elements in a row to the right

How can I align the input-group element and button to the right without specifying fixed widths or column sizes? Specifically, I want the col containing the button to only occupy the width of the button itself, with the remaining col being used by the inpu ...

htmlcsstwitter-bootstrapbootstrap-4

Building a Responsive Page with Bootstrap 4

I'm currently working on a design page with 2 boxes on the left side and 3 boxes on the right. It looks great on desktop, but I want the boxes to display individually on mobile devices and I'm having trouble figuring it out. Here is my code: < ...

cssbootstrap-4

Change the order of the div to be placed before the previous element

In this scenario, the third div is positioned to the right of the second div rather than the first div. There is space available to the right of the first div, but it is constrained from appearing above the second div. How can I adjust the placement of th ...

htmlcss

When the page loads, the HTML side menu will automatically scroll to the active item in a vertical

My website features a vertical side menu with approximately 20 items. The issue I am facing is that when a user clicks on an item, the destination loads but the side menu must be manually scrolled to find the active item if it's located at the bottom ...

javascripthtmljquerycss

Difficulty with collapsing icon in Bootstrap's navigation bar

I am in the process of building a bootstrap website and facing an issue with the collapsible navigation bar. The nav toggle button is always visible, but I want it to only appear when the nav bar goes to a medium size. How can I achieve this? The code sni ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for maintaining the visibility of the dynamic submenu while hovering over either the parent menu or submenu in vuejs

I'm currently working on a dynamic sidebar in vuejs and I need some assistance. The issue I'm facing is that I want the submenu to remain open when hovering over either the parent menu or the submenu itself. However, when I move the mouse away fr ...

javascripthtmlcssvue.jsvuejs2