Custom Trapezoid Design Using CSS3

Hello, I am trying to create a div that resembles the one in the image provided. I have been playing around with CSS3, but so far I've only managed to create a trapezoid shape with a different rotation. Is it possible to achieve this style using just CSS?

EDIT: This is what I've attempted so far:

.trapezoid {

    border-bottom: 100px solid red;
    border-left: 150px solid transparent;
    border-right: 0px solid transparent;
    height: 0;

}

The code above creates a nice trapezoid shape, but it's rotated differently than the desired style and I'm struggling to figure out how to adjust the rotation.

htmlcsscss-shapes

Answer №1

If you want to create a skewed effect, you can use a pseudo element like this:

div {
  height: 100px;
  background: tomato;
  padding-top: 10px;
  position: relative;
  overflow: hidden;
}
div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  background: gray;
  -webkit-transform-origin: top left;
  -webkit-transform: skewY(2deg);
  -moz-transform-origin: top left;
  -moz-transform: skewY(2deg);
  transform-origin: top left;
  transform: skewY(2deg);
}
<div></div>

Alternatively, you could try this approach:

div{
  height:100px;
  width:90vw;
  margin:0;padding:0;
  padding-top:10px;
  background:gray;position:relative;
  }
div:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  border-left:90vw solid transparent;
  border-top:10px solid red;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  }
<div></div>

Answer №2

To achieve the desired rotation and visibility of the tail, you need to utilize a dummy div.

#black {
  background-color: black;
  position: absolute;
  -ms-transform: rotate(1deg);
  /* IE 9 */
  -webkit-transform: rotate(1deg);
  /* Safari */
  transform: rotate(1deg);
  top: -95px;
}
#grey {
  background-color: grey;
  position: absolute;
  top: 0px;
}
div {
  width: 100%;
  height: 100px
}
<div id="grey"></div>
<div id="black"></div>

Answer №3

Here is the anticipated result:

.main {
    background: none repeat scroll 0 0 grey;
    height: 80px;
    overflow: hidden;
    position: relative;
    width: 380px;
}
.inner {
    background: none repeat scroll 0 0 red;
    height: 80px;
    left: 400px;
    margin: 0 auto;
    top: 80px;
    width: 150px;
    z-index: 99999;
}
.inner::before {
    border-bottom: 0 solid transparent;
    border-right: 100px solid red;
    border-top: 83px solid transparent;
    bottom: 0;
    content: "";
    height: 66px;
    left: 15px;
    position: absolute;
    right: 100%;
    top: 0;
    width: 0;
}
<div class="main">
<div class="inner"></div></div>

I trust this information is beneficial.

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

methods for modifying multiple elements with getElementById

I am facing an issue where only the first getElementById code is working and changing the value of the ID. Here is my HTML: <li ><a href="#Home" id="activehome" onclick="load_home()">HOME</a></li> <li ><a href="#Products" ...

javascripthtml

What is the method for manually setting the page_source in Python3 using Selenium?

Currently, I am developing an application utilizing selenium. My understanding is that the webdriver.Firefox's get method can be used to retrieve a webpage in the following manner: driver = webdriver.Firefox(executable_path=r'geckodriver&apo ...

pythonhtmlselenium

Challenges with sending emails using PHP

I'm having an issue with sending the contact form contents to this email address <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6615050f030812090a09011f5456575026010b070f0a4805090b">[email protected]</a>. It& ...

phphtml

Loading screen while all files and audio are being loaded

My JavaScript code is responsible for displaying and playing audio on my website. Unfortunately, the load time of the page is quite slow. To address this issue, I decided to follow a tutorial on installing a preloader, which can be found at . Although I ...

javascriptjqueryhtmlcssimage-preloader

Managing browser back button functionality

I've been struggling to find a solution for handling the browser back button event. I would like to prompt the user with a "confirm box" if they click on the browser back button. If they choose 'ok', I need to allow the back button action, ...

javascriptjqueryhtmlbrowser

Tips for nesting an anchor tag within another tag

After reviewing various inquiries on this platform, it has been commonly believed that embedding an anchor tag inside another anchor tag is not achievable. However, I recently stumbled upon a website that successfully accomplishes this and I am curious to ...

html

Conceal all elements until a search query is entered using the search bar

I want to create a search bar that hides all elements until the user actually searches for them, you can check out my JSfiddle for reference: `JSfiddle Link <div id="search"> <form> <input type="text" name="search" id="m ...

javascriptjqueryhtmlcss

What is the best way to select individual containers within a larger container in order to modify their background color?

Hey everyone! I am brand new to the world of HTML and CSS. I am currently developing a website that features 5 unique cards: The first card contains a single container with an image on the left and a paragraph on the right The second card is s ...

htmlcss

Troubleshooting issues with Bootstrap Accordion functionality within a React environment

After copying and pasting the Accordion code directly from Bootstrap, I'm facing an issue where the style is not consistent and the functionality isn't working as expected. Snippet from About.js: import React, { useState } from 'react' ...

htmlreactjsbootstrap-4accordionbootstrap-accordion

Questions from beginners regarding the use of canvas elements with imported images, including concerns about caching and altering colors

I have a couple of beginner questions regarding the canvas element in HTML. Firstly, I was wondering if images imported into a canvas element are cached? Is this consistent across different browsers? Secondly, is it possible to import a black and white PN ...

htmlcanvas

Creating a well-aligned form using Material-UI

Exploring Material-UI for the first time! How can a form be built where certain fields are arranged horizontally, others stacked vertically, and all aligned perfectly both vertically and horizontally? Check out this example image: https://i.sstatic.net/5R ...

javascripthtmlcssreactjsmaterial-ui

The shadow effects and color overlays do not seem to be functioning properly in Mozilla Firefox

I have designed a popup registration form using the Bootstrap modal class. To ensure form validation, I have integrated some jQuery validation engine functionality. Additionally, I customized the appearance by adding a box shadow, adjusting the background ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ensure that the CSS element pseudo-class does not override the styling of its child

Looking to style an anchor element that contains other HTML elements. Here is the basic code structure: HTML: <div class="container" id="sub-menu"> <div class="row" data-bind="foreach: subMenu"> ...

htmlcsscss-selectors

What is the best way to ensure image alignment is correct before displaying mat-error in Angular Material?

Having an issue with aligning an image with a mat error message in my Angular Material application. I've tried using matprefix but it's restricted to mat-form-field only. Any suggestions on how to properly align the image with the text? HTML < ...

htmlcssangularangular-material

Enable the button when there is an error after submission in AngularJS

Has anyone encountered issues with dynamically disabling a button? I noticed that my API delays for 2 seconds to mimic a slow connection. I expected the submit button to be disabled upon submission and then re-enable itself. In HTML, manually disabling t ...

javascripthtmlajaxangularjs

Mastering the Art of Positioning Arrows in Post Car

I am currently facing an issue with my post carousel. The carousel has two arrows on the side, and I have designed a background in the shape of circles for these arrows. However, I can't seem to figure out how to center the arrows inside the circles. ...

csswordpressowl-carousel

Designing Navigation Layouts

Visit my Wordpress site The navigation bar features a unique two-layer image hover effect where the color changes from black to white on hover. The images are stored within the .hoveringnav section with classes "top" for the top white image and "bottom" ...

htmlcss

Prevent the ability to add options dynamically to a drop-down select list

I have implemented a dynamic data retrieval feature from my database using jQuery's .getJSON function and appended the data to an HTML select drop-down list. The JavaScript code for this functionality is as follows: $.getJSON('url', f ...

javascriptjqueryhtml

Can a static text be displayed randomly using Javascript?

What I'm searching for is a unique text display feature that's different from scrolling. I envision a subtle fade in/out effect, but it's not necessary. The main goal is to fit within a small area on a website with limited vertical space - ...

javascriptjqueryhtml

Challenges faced when integrating Angular with Bootstrap elements

I am currently in the process of developing a website using Angular 12, and although it may not be relevant, I am also incorporating SCSS into my project. One issue that I have encountered pertains to the bootstrap module, specifically with components such ...

htmlangularbootstrap-5