What shape is this, and how can i achieve it using css?


Tags: html,css

Problem :

if anyone can help me with this it'd be great! What shape is this and do you have any ideas as to how i can achieve this shape in css?

enter image description here

EDIT: I've managed to solve the management of trapezoids with the following jquery:

        function unassignTrap(obj) {
        console.log(obj);
        $('.trapezoid').each(function () {
            $(this).removeClass('trapezoid');
            $(this).addClass('trapezoid2');
        })
        $(obj).removeClass('trapezoid2');
        $(obj).addClass('trapezoid');
    }


Solution :

It could be (some form of) a trapezoid and it's easy in CSS when you are using the border element.

.trapezoid {
  border-bottom: 50px solid lightblue;
  border-left: 0px solid transparent;
  border-right: 80px solid transparent;
  height: 0;
  width: 300px;
}
<div class="trapezoid"></div>


    CSS Howto..

    How to create vertically centered meeting borders on a div?

    How to align divs right and left while using the CSS ghost element technique for vertical centering?

    How do I make a div top to be the bottom of other div

    How can I show a loading screen while a really large image is loading?

    How to link a HTML page to a CSS file when the CSS file is in an upper directory?

    How to overwrite “left: 80%” from inline CSS

    How to create a texture paper background using CSS without image

    How to get the CSS left-property value of a div using JavaScript?

    How to position an absolute div next to an element in a scrollable section, but outside the section

    How to show the first N elements of a block and hide the others in css?

    How to get css width of class?

    How to blur a banner photo in CSS Style?

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    How to avoid third party CSS to affect current CSS? [closed]

    How to avoid blank lines at the top of new column (CSS columns)?

    XPath how to find second element with CSS class name

    How to force text to wrap inside inline-block div?

    How can I make my footer stay at the bottom with a dynamically re-sizable form?

    How to absolute position imageless corners with css

    How do I make my picture slideshow stay behind my header

    css google font how to download and embedd in css to avoid slow load times

    how to replace text with image in html/css

    How to change a vertical css menu to a horizontal one

    How to target an element under an other element?

    how to apply two classes of css on same element?

    CSS: How to center a bottom-fixed menu

    mkd2pdf, wkhtmltopdf, how to make PDF for slide

    CSS, how to size an img back to its width attribute

    How should I toggle action links based on row hover

    How can I get this anchor link to look like a button