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 to change different language to different font-size at same line without unique each container?

    How to create an image tag cloud

    how to add a margin on both sides and center the text in a paragraph?

    How to stop jquery loop function by a click while starting another loop function

    How can I transform dots to line between CSS menu items?

    How to call css into div class inner div class? [closed]

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    How do I change the opacity of an image when I hover of my text?

    How to avoid div width increase on hover

    How to start Bootstrap carousel with the first image at each occurrence of a modal window? [closed]

    How to use CSS to ensure items remain offscreen even if window is resized?

    how to locate submenu elements (xpath, className or css locators)

    How to stop the latter part of javascript from being called?

    How to make a simple plus one voting system in code igniter

    How to do taxonomy based css styling using drupal template.php?

    Rails 3: How to prevent image caching when the image is specified in the CSS file?

    How to control a

    How to make elements appear one by one using css animation

    How to handle alternating rows dynamically?

    How to shorten blockquote to wrap around floated div?

    How to add custom CSS for displaying on mobile screens in WordPress?

    How can I allign select menu with a button on the same line with css bootstrap?

    Css overflow-y: how to show only when needed

    Chrome inspector not showing body outline correctly

    How to adjust the opacity of CSS background image instead of radio button with an icon overlay

    How to manage text breaks in span using js, css or anything else

    how to overide css class with an underlying class

    How to cancel an upstream CSS declaration?

    How do I keep my footer text from appearing outside my footer

    How to position div's like this with CSS?