How do you make this dogeared shape with css only


Tags: html,css,shapes,css-shapes

Problem :

dogearCan anyone show me (and explain) how to create this image with CSS only and with 1 shape (50x50px)a square with a transparent "dogear" on the bottom right?

I've been playing with triangles and circles with borders, but this has extra sides which I can't figure out on my own how to build. Thanks.



Solution :

How about using gradients?

div{
  width: 50px;
  height: 50px;    
  background:
   linear-gradient(135deg, #333 0%, #333 90%, transparent 90%, transparent 100%);
}

http://jsfiddle.net/dCc7G/


    CSS Howto..

    How can I have floated list items display their bullet in IE7?

    How to properly float this image verticaly aligned?

    How to target element which have spaces in it's class name css?

    CSS: How to have only 100% with fluid layout and border?

    How to reset the input css to the defaults in Bootstrap 3.2

    how to make header title with buttons

    Formatting text, Suggestions with how-to?

    css 3d perspective not showing up correctly in certain browsers

    How to prevent HTML code in a literal inside a DIV from affecting outer page styles

    how to make the osx-like border on css?

    how to prevent css animation from running on page load

    joomla: how is the CSS generated?

    show No-Overlay (transparent background) when using backdrop:“static” in bootstrap modal

    How to Update Visual Studio's “Cascading Style Sheet Version for Validation”

    How do I get 3 horizontal divs to stack in different vertical order or flow when browser width decreases?

    how to center image + text in an li Element

    How to scroll an html element both horizontally and vertically with top and side labels scrolling correctly

    How do I make a (mock) bank system? [closed]

    How can I create HTML/CSS responsive tile?

    How to hide a whole a
    if table tag is is empty or null?

    How to CSS a two column list of items?

    How to enqueue second stylesheet in Wordpress child theme?

    How to make a progress bar like this in CSS

    How can I make several divs on the left overlap one div on the right?

    How to get an image from a css animation keyframe to remain on the page after complete [duplicate]

    CSS: How to make an image-border

    How to use Jekyll baseurl in css files

    How can I add interactive content to a Bootstrap popover?

    How to define dynamic height in css (or html)?

    how to hide an image on css active in IE