Cut Corners using CSS

Question

I m looking to  cut  the top left corner of a div  like if you had folded the corner of a page down   I d like to do it in pure CSS  are there any methods

User · Answer

According to Harry s linear-gradient solution  answered Oct 14  15 at 9 55   it says that opacity background isn t possible  I tried it and yep  it isn t    But  I found a workaround  No it s not super optimised  but it worked  So here s my solution  Since Harry doesn t use pseudo element  we can achieve this by creating one    Set position relative to the container and create a pseudo element with the same linear-gradient properties  In other words  just clone it  Then put a transparent background for the container  and lets say a black background for the clone  Put a position absolute on it  a z-index of -1 and an opacity value  ie  50    It will do the job  Again it s a workaround and it s not perfect but it works just fine     x000D   x000D   cut-corner   x000D      position  relative  x000D      color  white  x000D      background-repeat  no-repeat  x000D      background-image  linear-gradient white  white   linear-gradient white  white   linear-gradient white  white   linear-gradient white  white   linear-gradient to bottom left  transparent calc 50  - 1px   white calc 50  - 1px   white calc 50    1px   transparent calc 50    1px    linear-gradient transparent  transparent   linear-gradient transparent  transparent   x000D      background-size  2px 100   2px 100   100  2px  100  2px  25px 25px  100  100   100  100   x000D      background-position  0  0   100  25px  -25px 0   0px 100   100  0   -25px 0   100  25px  x000D    x000D   cut-corner after   x000D      content      x000D      position  absolute  x000D      left  0  x000D      bottom  0  x000D      right  0  x000D      top  0  x000D      z-index  -1  x000D      opacity  0 5  x000D      background-repeat  no-repeat  x000D      background-image  linear-gradient white  white   linear-gradient white  white   linear-gradient white  white   linear-gradient white  white   linear-gradient to bottom left  transparent calc 50  - 1px   white calc 50  - 1px   white calc 50    1px   black calc 50    1px    linear-gradient black  black   linear-gradient black  black   x000D      background-size  2px 100   2px 100   100  2px  100  2px  25px 25px  100  100   100  100   x000D      background-position  0  0   100  25px  -25px 0   0px 100   100  0   -25px 0   100  25px  x000D    x000D   x000D     Just for demo    x000D   x000D  div   x000D    padding  10px  x000D    x000D  body  x000D   background-image  radial-gradient circle   3F9CBA 0    153346 100    x000D    x000D   lt div class  cut-corner  gt  x000D    Some content lt br gt  x000D    Some content lt br gt  x000D    Some content lt br gt  x000D    Some content   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

CSS Clip-Path  Using a clip-path is a new  up and coming alternative  Its starting to get supported more and more and is now becoming well documented  Since it uses SVG to create the shape  it is responsive straight out of the box    CanIUse Clip Path Generator    x000D   x000D  div   x000D    width  200px  x000D    min-height  200px  x000D    -webkit-clip-path  polygon 0 0  0 100   100  100   100  25   75  0   x000D    clip-path  polygon 0 0  0 100   100  100   100  25   75  0   x000D    background  lightblue  x000D    x000D   lt div gt  x000D     lt p gt Some Text lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    CSS Transform  I have an alternative to web-tiki s transform answer    x000D   x000D  body   x000D    background  lightgreen  x000D    x000D  div   x000D    width  200px  x000D    height  200px  x000D    background  transparent  x000D    position  relative  x000D    overflow  hidden  x000D    x000D  div bg   x000D    width  200   x000D    height  200   x000D    background  lightblue  x000D    position  absolute  x000D    top  0  x000D    left  -75   x000D    transform-origin  50  50   x000D    transform  rotate 45deg   x000D    z-index  -1  x000D    x000D   lt div gt  x000D     lt div class  bg  gt  lt  div gt  x000D     lt p gt Some Text lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This code allows you to cut corners on each side of the rectangle   div     display block    height  300px    width  200px    background  url  http   lorempixel com 180 290    no-repeat    background-size cover     -webkit-clip-path  polygon 10px 0   calc 100  - 10px  0   100  10px  100  calc 100  - 10px   calc 100  - 10px  100   10px 100   0  calc 100  - 10px   0  10px     clip-path  polygon 10px 0   calc 100  - 10px  0   100  10px  100  calc 100  - 10px   calc 100  - 10px  100   10px 100   0  calc 100  - 10px   0  10px       http   jsfiddle net 2bZAW 5552

User · Answer

Here s a solution for if you don t want a solid-color background  i e  just a border with square-cut corners   x000D   x000D   container     width  100px    height  100px    background-color  white    border  1px solid black    position  relative      border         position  absolute        width  100         height  100      border before           content              position  absolute          border-top  15px solid white          border-left  15px solid white          width  0              border after           content              position  absolute          width  16px          height  1px          background  black             tl before   top  -5px  left  -5px  transform  rotate -45deg      tl after   top  5px  left  -3px  transform  rotate -45deg      tr before   top  -5px  right  -5px  transform  rotate 45deg      tr after   top  5px  right  -3px  transform  rotate 45deg       bl before   bottom  -5px  left  -5px  transform  rotate 45deg      bl after   bottom  5px  left  -3px  transform  rotate 45deg       br before   bottom  -5px  right  -5px  transform  rotate -45deg      br after   bottom  5px  right  -3px  transform  rotate -45deg               x000D   lt html gt     lt body gt        lt div class  container  gt          lt div class  border tl  gt  lt  div gt          lt div class  border tr  gt  lt  div gt          lt div class  border bl  gt  lt  div gt          lt div class  border br  gt  lt  div gt        lt  div gt     lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

If you need a diagonal border instead of a diagonal corner  you can stack 2 divs with each a pseudo element   DEMO  http   codepen io remcokalf pen BNxLMJ   x000D   x000D   container   x000D    padding  100px 200px  x000D    overflow  hidden  x000D    x000D   x000D  div diagonal   x000D    background   da1d00  x000D    color   fff  x000D    font-family  Arial  Helvetica  sans-serif  x000D    width  300px  x000D    height  300px  x000D    padding  70px  x000D    position  relative  x000D    margin  30px  x000D    float  left  x000D    x000D   x000D  div diagonal2   x000D    background   da1d00  x000D    color   fff  x000D    font-family  Arial  Helvetica  sans-serif  x000D    width  300px  x000D    height  300px  x000D    padding  70px  x000D    position  relative  x000D    margin  30px  x000D    background   da1d00 url http   www remcokalf nl background jpg  left top  x000D    background-size  cover  x000D    float  left  x000D    x000D   x000D  div diagonal3   x000D    background   da1d00  x000D    color   da1d00  x000D    font-family  Arial  Helvetica  sans-serif  x000D    width  432px  x000D    height  432px  x000D    padding  4px  x000D    position  relative  x000D    margin  30px  x000D    float  left  x000D    x000D   x000D  div inside   x000D    background   fff  x000D    color   da1d00  x000D    font-family  Arial  Helvetica  sans-serif  x000D    width  292px  x000D    height  292px  x000D    padding  70px  x000D    position  relative  x000D    x000D   x000D  div diagonal before  x000D  div diagonal2 before   x000D    content      x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    border-top  80px solid  fff  x000D    border-right  80px solid transparent  x000D    width  0  x000D    x000D   x000D  div diagonal3 before   x000D    content      x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    border-top  80px solid  da1d00  x000D    border-right  80px solid transparent  x000D    width  0  x000D    z-index  1  x000D    x000D   x000D  div inside before   x000D    content      x000D    position  absolute  x000D    top  -4px  x000D    left  -4px  x000D    border-top  74px solid  fff  x000D    border-right  74px solid transparent  x000D    width  0  x000D    z-index  2  x000D    x000D   x000D  h2   x000D    font-size  30px  x000D    line-height  1 3em  x000D    margin-bottom  1em  x000D    position  relative  x000D    z-index  1000  x000D    x000D   x000D  p   x000D    font-size  16px  x000D    line-height  1 6em  x000D    margin-bottom  1 8em  x000D    x000D   x000D   grey   x000D    width  100   x000D    height  400px  x000D    background   ccc  x000D    position  relative  x000D    margin-top  100px  x000D    x000D   x000D   grey before   x000D    content      x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    border-top  80px solid  fff  x000D    border-right  80px solid  ccc  x000D    width  400px  x000D    x000D   lt div id  grey  gt  lt  div gt  x000D   lt div class  container  gt  x000D     lt div class  diagonal  gt  x000D       lt h2 gt Header title lt  h2 gt  x000D       lt p gt Yes a CSS diagonal corner is possible lt  p gt  x000D     lt  div gt  x000D     lt div class  diagonal2  gt  x000D       lt h2 gt Header title lt  h2 gt  x000D       lt p gt Yes a CSS diagonal corner with background image is possible lt  p gt  x000D     lt  div gt  x000D     lt div class  diagonal3  gt  x000D       lt div class  inside  gt  x000D         lt h2 gt Header title lt  h2 gt  x000D         lt p gt Yes a CSS diagonal border is even possible with an extra div lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you need a transparent cut out edge  you can use a rotated pseudo element as a background for the div and position it to cut out the desired corner      x000D   x000D  body   x000D    background  url http   i imgur com k8BtMvj jpg   x000D    background-size  cover  x000D    x000D  div   x000D    position  relative  x000D    width  50   x000D    margin  0 auto  x000D    overflow  hidden  x000D    padding  20px  x000D    text-align  center  x000D    x000D  div after   x000D    content      x000D    position  absolute  x000D    width  1100   height  1100   x000D    top  20px  right  -500   x000D    background  rgba 255 255 255  8   x000D    transform-origin  54  0  x000D    transform  rotate 45deg   x000D    z-index  -1  x000D    x000D   lt div gt  x000D        content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt  x000D   lt  div gt  x000D   x000D   x000D    Note that this solution uses transforms and you need to add the required vendor prefixes  For more info see canIuse   To cut the bottom right edge  you can change the top  transform and transform-origin properties of the pseudo element to    x000D   x000D  body   x000D    background  url http   i imgur com k8BtMvj jpg   x000D    background-size  cover  x000D    x000D  div   x000D    position  relative  x000D    width  50   x000D    margin  0 auto  x000D    overflow  hidden  x000D    padding  20px  x000D    text-align  center  x000D    x000D  div after   x000D    content      x000D    position  absolute  x000D    width  1100   height  1100   x000D    bottom  20px  right  -500   x000D    background  rgba 255 255 255  8   x000D    transform-origin  54  100   x000D    transform  rotate -45deg   x000D    z-index  -1  x000D    x000D   lt div gt  x000D        content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt     content     lt br  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Another one solution  html    lt div class  background  gt     lt div class  container  gt Hello world  lt  div gt   lt  div gt    css    background     position  relative    width  50px    height  50px    border-right  150px solid lightgreen    border-bottom  150px solid lightgreen    border-radius  10px     background  before     content        position  absolute    top  0    left  0    width  0    height  0    border  25px solid lightgreen    border-top-color  transparent    border-left-color  transparent     container     position  absolute    padding-left  25px    padding-top  25px    font-size  38px    font-weight  bolder      https   codepen io eggofevil pen KYaMjV

User · Answer

by small modification of Joshep s code   You can use this code which seems like right corner folded down as per your requirement   div       height  300px      background  red      position  relative     div before       content          position  absolute      top  0  right  0      border-top  80px solid white      border-left  80px solid blue      width  0

User · Answer

We had the problem of different background colors for our cutted elements  And we only wanted upper right und bottom left corner      x000D   x000D  body   x000D   background-color  rgba 0 0 0 0 3  x000D    x000D    x000D   x000D   box   x000D   position  relative  x000D   display  block  x000D   background  blue  x000D   text-align  center  x000D   color  white  x000D   padding  15px  x000D   margin  50px  x000D    x000D   x000D   box before  x000D   box after   x000D   content      x000D   position  absolute  x000D   left  0   x000D   right  0  x000D   bottom  100   x000D   border-bottom  15px solid blue  x000D   border-left  15px solid transparent  x000D   border-right  15px solid transparent  x000D    x000D   x000D   box before  x000D   border-left  15px solid blue  x000D    x000D   x000D   box after  x000D   border-right  15px solid blue  x000D    x000D   x000D   box after   x000D   bottom  auto  x000D   top  100   x000D   border-bottom  none  x000D   border-top  15px solid blue  x000D    x000D   x000D   x000D     Active box    x000D   box active  x000D   background  white  x000D   color  black  x000D    x000D   x000D   x000D   x000D   active before  x000D   active after   x000D   border-bottom  15px solid white  x000D    x000D   x000D   active before  x000D   border-left  15px solid white  x000D    x000D   x000D   active after  x000D   border-right  15px solid white  x000D    x000D   x000D   active after   x000D   border-bottom  none  x000D   border-top  15px solid white  x000D    x000D   lt div class  box  gt  x000D   Some text goes here  Some text goes here  Some text goes here  Some text goes here  lt br  gt Some text goes here  lt br  gt Some text goes here  lt br  gt Some text goes here  lt br  gt Some text goes here  lt br  gt Some text goes here  lt br  gt  x000D   lt  div gt  x000D   lt div class  box  gt  x000D   Some text goes here  x000D   lt  div gt  x000D   lt div class  box active  gt  x000D   Some text goes here  x000D    lt span class  border-bottom  gt  lt  span gt  x000D   lt  div gt  x000D   lt div class  box  gt  x000D   Some text goes here  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You could use linear-gradient   Let s say the parent div had a background image  and you needed a div to sit on top of that with a gray background and a dog-eared left corner   You could do something like this    parent-div   background  url   image jpg       child-div       background   333     background  linear-gradient 135deg  transparent 30px   333 0       See it on CodePen  Further reading    CSS Gradients on CSS-Tricks Beveled corners  amp  negative border-radius with CSS3 gradients

User · Answer

If the parent element has a solid color background  you can use pseudo-elements to create the effect    x000D   x000D  div   x000D      height  300px  x000D      background  red  x000D      position  relative  x000D    x000D   x000D  div before   x000D      content      x000D      position  absolute  x000D      top  0  right  0  x000D      border-top  80px solid white  x000D      border-left  80px solid red  x000D      width  0  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D    http   jsfiddle net 2bZAW     P S  The upcoming border-corner-shape is exactly what you re looking for  Too bad it might get cut out of the spec  and never make it into any browsers in the wild

User · Answer

Another idea using mask and CSS variables to have better control over the whole shape  It s reponsive  transparent and allow any kind of background   x000D   x000D   box     --all 0px    width 200px    height 150px    display inline-block    margin 10px    background red    -webkit-mask       linear-gradient   45deg  transparent 0 var --bottom-left var --all     fff 0  bottom left       linear-gradient  -45deg  transparent 0 var --bottom-right var --all    fff 0  bottom right       linear-gradient  135deg  transparent 0 var --top-left var --all        fff 0  top left       linear-gradient -135deg  transparent 0 var --top-right var --all       fff 0  top right     -webkit-mask-size 50 5  50 5      -webkit-mask-repeat no-repeat      body     background grey    x000D   lt div class  box  style  --top-left 20px  gt  lt  div gt   lt div class  box  style  --top-right 20px --bottom-right 50px background radial-gradient red yellow   gt  lt  div gt   lt div class  box  style  --all 30px background url https   picsum photos id 104 200 200   gt  lt  div gt   lt div class  box  style  --all 30px --bottom-right 0px background linear-gradient red blue   gt  lt  div gt   lt div class  box  style  --all 50  width 150px background green  gt  lt  div gt   lt div class  box  style  --all 12  width 150px background repeating-linear-gradient 45deg  000 0 10px  fff 0 20px   gt  lt  div gt  x000D   x000D   x000D    And below in case you want to consider border   x000D   x000D   box     --all 0px    --b pink       width 200px    height 150px    display inline-block    margin 10px    border 5px solid var --b     background       linear-gradient   45deg  var --b  0 calc var --bottom-left var --all     5px   transparent 0  bottom left  50  50        linear-gradient  -45deg  var --b  0 calc var --bottom-right var --all     5px  transparent 0  bottom right 50  50        linear-gradient  135deg  var --b  0 calc var --top-left var --all     5px      transparent 0  top left     50  50        linear-gradient -135deg  var --b  0 calc var --top-right var --all     5px     transparent 0  top right    50  50        var --img red     background-origin border-box    background-repeat no-repeat    -webkit-mask       linear-gradient   45deg  transparent 0 var --bottom-left var --all     fff 0  bottom left       linear-gradient  -45deg  transparent 0 var --bottom-right var --all    fff 0  bottom right       linear-gradient  135deg  transparent 0 var --top-left var --all        fff 0  top left       linear-gradient -135deg  transparent 0 var --top-right var --all       fff 0  top right     -webkit-mask-size 50 5  50 5      -webkit-mask-repeat no-repeat      body     background grey    x000D   lt div class  box  style  --top-left 20px  gt  lt  div gt   lt div class  box  style  --top-right 20px --bottom-right 50px --img radial-gradient red yellow  --b white   gt  lt  div gt   lt div class  box  style  --all 30px --img url https   picsum photos id 104 200 200  center cover --b orange   gt  lt  div gt   lt div class  box  style  --all 30px --bottom-right 0px --img linear-gradient red blue   gt  lt  div gt   lt div class  box  style  --all 50  width 150px --img green --b red   gt  lt  div gt   lt div class  box  style  --all 12  width 150px --img repeating-linear-gradient 45deg  000 0 10px  fff 0 20px   gt  lt  div gt  x000D   x000D   x000D    Let s also add some radius   x000D   x000D   box     --all 0px    --b pink       width 200px    height 150px    display inline-block    margin 10px    filter url  round      box  before     content       position absolute    top 0    left 0    right 0    bottom 0    background var --img red     -webkit-mask       linear-gradient   45deg  transparent 0 var --bottom-left var --all     fff 0  bottom left       linear-gradient  -45deg  transparent 0 var --bottom-right var --all    fff 0  bottom right       linear-gradient  135deg  transparent 0 var --top-left var --all        fff 0  top left       linear-gradient -135deg  transparent 0 var --top-right var --all       fff 0  top right     -webkit-mask-size 50 5  50 5      -webkit-mask-repeat no-repeat     body     background grey    x000D   lt div class  box  style  --top-left 20px  gt  lt  div gt   lt div class  box  style  --top-right 20px --bottom-right 50px --img radial-gradient red yellow  --b white   gt  lt  div gt   lt div class  box  style  --all 30px --img url https   picsum photos id 104 200 200  center cover --b orange   gt  lt  div gt   lt div class  box  style  --all 30px --bottom-right 0px --img linear-gradient red blue   gt  lt  div gt   lt div class  box  style  --all 50  width 150px --img green --b red   gt  lt  div gt   lt div class  box  style  --all 12  width 150px --img repeating-linear-gradient 45deg  000 0 10px  fff 0 20px   gt  lt  div gt    lt svg style  visibility  hidden  position  absolute   width  0  height  0  xmlns  http   www w3 org 2000 svg  version  1 1  gt     lt defs gt           lt filter id  round  gt               lt feGaussianBlur in  SourceGraphic  stdDeviation  5  result  blur    gt                   lt feColorMatrix in  blur  mode  matrix  values  1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9  result  goo    gt               lt feComposite in  SourceGraphic  in2  goo  operator  atop   gt           lt  filter gt       lt  defs gt   lt  svg gt  x000D   x000D   x000D

User · Answer

Here is another approach using CSS transform  skew 45deg  to produce the cut corner effect  The shape itself involves three elements  1 real and 2 pseudo-elements  as follows    The main container div element has overflow  hidden and produces the left border  The  before pseudo-element which is 20  the height of the parent container and has a skew transform applied to it  This element prodcues the border on the top and cut  slanted  border on the right side  The  after pseudo-element which is 80  the height of the parent  basically  remaining height  and produces the bottom border  the remaining portion of the right border    The output produced is responsive  produces a transparent cut at the top and supports transparent backgrounds    x000D   x000D  div   x000D    position  relative  x000D    height  100px  x000D    width  200px  x000D    border-left  2px solid beige  x000D    overflow  hidden  x000D    x000D  div after  x000D  div before   x000D    position  absolute  x000D    content      x000D    width  calc 100  - 2px   x000D    left  0px  x000D    z-index  -1  x000D    x000D  div before   x000D    height  20   x000D    top  0px  x000D    border  2px solid beige  x000D    border-width  2px 3px 0px 0px  x000D    transform  skew 45deg   x000D    transform-origin  right bottom  x000D    x000D  div after   x000D    height  calc 80  - 4px   x000D    bottom  0px  x000D    border  2px solid beige  x000D    border-width  0px 2px 2px 0px  x000D    x000D   filled before   filled after   x000D    background-color  beige  x000D    x000D   x000D     Just for demo    x000D   x000D  div   x000D    float  left  x000D    color  beige  x000D    padding  10px  x000D    transition  all 1s  x000D    margin  10px  x000D    x000D  div hover   x000D    height  200px  x000D    width  300px  x000D    x000D  div filled  x000D    color  black  x000D    x000D  body  x000D   background-image  radial-gradient circle   3F9CBA 0    153346 100    x000D    x000D   lt div class  cut-corner  gt Some content lt  div gt  x000D   lt div class  cut-corner filled  gt Some content lt  div gt  x000D   x000D   x000D        The below is another method to produce the cut corner effect by using linear-gradient background images  A combination of 3 gradient images  given below  is used    One linear gradient  angled towards bottom left  to produce the cut corner effect  This gradient has a fixed 25px x 25px size  One linear gradient to provide a solid color to the left of the triangle that causes the cut effect  A gradient is used even though it produces a solid color because we can control size  position of background only when images or gradients are used  This gradient is positioned at -25px on X-axis  basically meaning it would end before the place where the cut is present   Another gradient similar to the above which again produces a solid color but is positioned at 25px down on the Y-axis  again to leave out the cut area     The output produced is responsive  produces transparent cut and doesn t require any extra elements  real or pseudo   The drawback is that this approach would work only when the background  fill  is a solid color and it is very difficult to produce borders  but still possible as seen in the snippet     x000D   x000D   cut-corner   x000D    height  100px  x000D    width  200px  x000D    background-image  linear-gradient to bottom left  transparent 50   beige 50    linear-gradient beige  beige   linear-gradient beige  beige   x000D    background-size  25px 25px  100  100   100  100   x000D    background-position  100  0   -25px 0   100  25px  x000D    background-repeat  no-repeat  x000D    x000D   filled   x000D    background-image  linear-gradient black  black   linear-gradient black  black   linear-gradient black  black   linear-gradient black  black   linear-gradient to bottom left  transparent calc 50  - 1px   black calc 50  - 1px   black calc 50    1px   beige calc 50    1px    linear-gradient beige  beige   linear-gradient beige  beige   x000D    background-size  2px 100   2px 100   100  2px  100  2px  25px 25px  100  100   100  100   x000D    background-position  0  0   100  25px  -25px 0   0px 100   100  0   -25px 0   100  25px  x000D    x000D   x000D     Just for demo    x000D   x000D     x000D    box-sizing  border-box  x000D      x000D  div   x000D    float  left  x000D    color  black  x000D    padding  10px  x000D    transition  all 1s  x000D    margin  10px  x000D    x000D  div hover   x000D    height  200px  x000D    width  300px  x000D    x000D  body  x000D   background-image  radial-gradient circle   3F9CBA 0    153346 100    x000D    x000D   lt div class  cut-corner  gt Some content lt  div gt  x000D   lt div class  cut-corner filled  gt Some content lt  div gt  x000D   x000D   x000D

User · Answer

With a small edit to Joseph s code  the element does not require a solid background   div       height  300px      background  url  http   images2 layoutsparks com 1 190037 serene-nature-scenery-blue jpg        position  relative     div before       content          position  absolute      top  0  right  0      border-top  80px solid white      border-left  80px solid rgba 0 0 0 0       width  0      http   jsfiddle net 2bZAW 1921   This use of  rgba 0 0 0 0   allows the inner  corner  to be invisible    You can also edit the 4th parameter  a   where 0  lt  a  lt  1  to have a shadow for more of a  folded-corner  effect   http   jsfiddle net 2bZAW 1922   with shadow     NOTE  RGBA color values are supported in IE9   Firefox 3   Chrome  Safari  and in Opera 10

User · Answer

I recently cut off the top right corner and overlaid the tabs like folders  Complete code noob  so ignore the shitty code  but I did this by combining a square  a triangle  and a rectangle    This may or may not be a new approach  but hopefully  someone finds it helpful   https   i stack imgur com qFMRz png  Here is the HTML    lt  DOCTYPE html gt   lt html lang   en  gt       lt head gt           lt meta charset  UTF-8  gt           lt meta name  viewport  content  width device-width  initial-scale 1  gt           lt link rel  stylesheet  type  text css  href  style css  gt        lt  head gt       lt body gt           lt div class  folders  gt               lt div class  container  gt                   lt div class  triangleOne  gt                       lt p class  folderNames  gt Home lt  p gt                   lt  div gt                   lt div class  triangleOneCut  gt                   lt  div gt                   lt div class  triangleOneFill  gt                   lt  div gt               lt  div gt                lt div class  container2  gt                   lt div class  triangleOne blue  gt                       lt p class  folderNames  gt About lt  p gt                   lt  div gt                   lt div class  triangleOneCut blueCut  gt                   lt  div gt                   lt div class  triangleOneFill blue  gt                   lt  div gt               lt  div gt                lt div class  container3  gt                   lt div class  triangleOne green  gt                       lt p class  folderNames  gt Contact lt  p gt                   lt  div gt                   lt div class  triangleOneCut greenCut  gt                   lt  div gt                   lt div class  triangleOneFill green  gt                   lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt    Here is the CSS    triangleOne       height  50px      width  40px      background  red      border-radius  5px 0px 0px 5px      position  absolute      triangleOneCut       content          position  absolute      top  0  left  40px      border-top  10px solid transparent      border-left  10px solid red      width  0      triangleOneFill       content          position  absolute      top  10px  left  40px      width  10px      height  40px      background-color  red      border-radius  0px 0px 5px 0px      container       position  relative      height  50px      width  50px      display  inline-block      z-index  3      container2       position  relative      height  50px      width  50px      display  inline-block      left  -10px      z-index  2      container3       position  relative      height  50px      width  50px      display  inline-block      left  -20px      z-index  1      blue       background-color  blue      green       background-color  green      blueCut       border-left  10px solid blue      greenCut       border-left  10px solid green      folders       width  160px      height  50px         border  10px solid white         margin  auto      padding-left  25px      margin-top  100px      folderNames       text-align  right      padding-left  2px      color  white      margin-top  1 5px      font-family  monospace      font-size  6 5px      border-bottom  double 1 5px white

User · Answer

You can use clip-path  as Stewartside and Sviatoslav Oleksiv mentioned  To make things easy  I created a sass mixin    mixin cut-corners   left-top   right-top  0px   right-bottom  0px   left-bottom  0px      clip-path  polygon  left-top 0   calc 100  -    right-top   0   100   right-top  100  calc 100  -    right-bottom    calc 100  -    right-bottom   100    left-bottom 100   0  calc 100  -    left-bottom    0   left-top       cut-corners      include cut-corners 10px  0  25px  50px

[html] Cut Corners using CSS

Examples related to html

Examples related to css

Examples related to css-shapes