Anyone know how to create CSS rectangle with one corner chopped off?

Tags: css,css3

Problem :

Does anyone know how to create a css polygon that looks like this:

enter image description here

Solution :

I made a jsfiddle that may be helpful. I adapted it from this one:

Anyway, here's what I did:

.corner {
    width: calc(300px - 20px); /*300 is the width, 20 is the size of the 'cut'*/
    height: 0px;
    /*change the top/left depending on which corner you want to use*/
    border-top: 20px solid red; /*I made this red just so it was easier to see*/
    border-right: 20px solid white; /*not sure what you will do if this is not on a white background.*/
.main {
    width: 300px;
    height: 100px;
    background-color: black;

    CSS Howto..

    How to center a navigation bar with CSS or HTML?

    How to vertically align lists when one li is a div

    How to make dropdown hide when clicked anywhere outside of it?

    how to prevent vertical Stepdown

    How can I make this jQuery effect responsive?

    How to add text or characters using CSS (no javascript)?

    How to keep all the parent except the first LI highlighted when the sub LI is hovered over

    How to change just the css inside a DIV and not anywhere else?

    Showing horizontal-scrollbar while setting width: 100%

    How to fix incorrect element size on browser scaling?

    How to move elements inside the left column of a 2 column css grid above and below the main content area on collapse

    How to reference CSS file in a javascript only class

    How can i make 3 independently scrollable columns

    Panel in Horizontal List item showing behind Button

    How to remove the white gap between the background image and the navigation bar

    How to build a complex table by using CSS?

    How can I apply a link over this entire div?

    how to make the file input field wrap?

    How can I force a css flex child to be the only on its row?

    How do i use a simple string variable with jquery?

    How to input block of text next to Font Awesome icon in CSS?

    How to add an unknown amount of dots to a line depending on length of word?

    CSS Padding is working WITH :after selector - how to make it work on main element independently

    How to apply CSS to :last-child button

    How to do this: A fluid-width parent element, with a fixed-width and a fluid-width child element?

    How to add CSS to my HTML code on Notepad++

    How to Make Tabs In CSS?

    How to align two images in html/css

    How to put the hover image above the original image

    How can I set first element to display: none;?