Slanted Corner on CSS box

后端 未结 6 1230
小蘑菇
小蘑菇 2020-11-27 06:17

I have been playing with CSS for only a short time and am trying to have a normal box but with the top left hand corner cut off at a 45 degree angle. Not a small amount eith

6条回答
  •  南笙
    南笙 (楼主)
    2020-11-27 06:43

    CSS3 linear-gradient() can draw this background.

    background: linear-gradient(to bottom right, transparent 50px, blue 50px);
    

    body {
      background: linear-gradient(red, orange) no-repeat;
      min-height: 100vh;
      margin: 0;
    }
    div {
      background: linear-gradient(to bottom right, transparent 50px, blue 50px);
      margin: 25px auto;
      padding: 50px;
      height: 200px;
      width: 200px;
      color: white;
    }
    Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...

提交回复
热议问题