Cut Corners using CSS

后端 未结 15 1192
悲&欢浪女
悲&欢浪女 2020-11-22 03:34

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?

15条回答
  •  攒了一身酷
    2020-11-22 04:15

    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:

    Transprent cut out edge on a div

    body {
      background: url(http://i.imgur.com/k8BtMvj.jpg);
      background-size: cover;
    }
    div {
      position: relative;
      width: 50%;
      margin: 0 auto;
      overflow: hidden;
      padding: 20px;
      text-align: center;
    }
    div:after {
      content: '';
      position: absolute;
      width: 1100%; height: 1100%;
      top: 20px; right: -500%;
      background: rgba(255,255,255,.8);
      transform-origin: 54% 0;
      transform: rotate(45deg);
      z-index: -1;
    }
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...

    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:

    body {
      background: url(http://i.imgur.com/k8BtMvj.jpg);
      background-size: cover;
    }
    div {
      position: relative;
      width: 50%;
      margin: 0 auto;
      overflow: hidden;
      padding: 20px;
      text-align: center;
    }
    div:after {
      content: '';
      position: absolute;
      width: 1100%; height: 1100%;
      bottom: 20px; right: -500%;
      background: rgba(255,255,255,.8);
      transform-origin: 54% 100%;
      transform: rotate(-45deg);
      z-index: -1;
    }
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...
    ... content ...

提交回复
热议问题