How to cut box corner Using CSS with transparent background?

Question

I want to cut left top corner of a box using CSS like this.

keep in mind that background is transparent.

score 21 · Accepted Answer · edited Jul 09 '17 at 10:56

21

Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner).

This gradient will look the same regardless of .card width and height.

body {
  background: purple;
}

.card {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, transparent 20px, white 20px);
}

<div class="card"></div>

edited Jul 09 '17 at 10:56

Asons

84,923
12
110
165

answered Jul 09 '17 at 09:15

Vadim Ovchinnikov

13,327
5
62
90

2

@LGSon just as a side cooment, right bottom and 135deg are equivalent only if the aspect ratio of the container is 1:1. However, it's difficult to say which one is better if the OP doesn't state he intended behaviour on non square elements – vals Jul 09 '17 at 10:16
Works. But what if you also want to use background on the card? For example to give a gradient background to the card itself? – Eliezer Steinbock Dec 11 '18 at 18:44
@EliezerSteinbock You can use modern `clip-path` solution if you are OK with its browser support. For instance, Nick suggested [one](https://stackoverflow.com/a/44994129/1548895). – Vadim Ovchinnikov Dec 12 '18 at 09:54
I need to support Edge – Eliezer Steinbock Dec 12 '18 at 09:55
@EliezerSteinbock Then the best option would be to use SVG background here. – Vadim Ovchinnikov Dec 12 '18 at 11:06
@EliezerSteinbock Also note that Microsoft Edge team [is working on implementing `clip-path`](https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6261341-css-masking), so in nearest future you can change your code to use this approach. – Vadim Ovchinnikov Dec 12 '18 at 11:14
Thanks. Would you also recommend svg background for a window that the user can change size of by dragging its edges? And then making sure the corner stays the same size by the other dimensions change – Eliezer Steinbock Dec 12 '18 at 11:21
1

@EliezerSteinbock I've [asked about your problem](https://stackoverflow.com/q/53742988/1548895), here's [the first solution](https://stackoverflow.com/a/53743308/1548895) at the moment. – Vadim Ovchinnikov Dec 12 '18 at 13:03
wow this was the easiest solution i found that worked. thank you – user1189352 Jun 13 '19 at 21:02

Ori Drori · Answer 2 · 2017-07-09T14:35:42.723

7

You can use a simple linear gradient for that:

body {
  background: purple;
}

.card {
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom right, transparent 5%, white 5%);
}

<div class="card"></div>

edited Jul 09 '17 at 14:35

answered Jul 09 '17 at 07:34

Ori Drori

183,571
29
224
209

score 5 · Answer 3 · answered Jul 09 '17 at 07:35

5

You can use clip-path https://developer.mozilla.org/en/docs/Web/CSS/clip-path

and use something like this:

div#test{
 background:red;
 width:200px;
 height: 200px;
 -webkit-clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
}

<div id="test"></div>

answered Jul 09 '17 at 07:35

Nick

13,493
8
51
98

4

@AmirUrRehman Note though, this solution has bad browser support (which I suggest, Nick, you always add info about when posting answers that doesn't at least work cross all the latest browsers) – Asons Jul 09 '17 at 09:30

Asons · Answer 4 · 2018-02-08T06:34:01.803

With a pseudo and transform you can do that, and it has good browser support (from IE9)

body {
  background: url(https://picsum.photos/400/300) center / cover;
}

div {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

div::before {
  content: '';
  position: absolute;
  left: calc(50% + 25px);             /*  25px is height/width of the cut  */
  top: calc(50% + 25px);
  width: 141.5%;
  height: 141.5%;
  transform: translate(-50%,-50%)  rotate(45deg);
  background: #eee;
  opacity: 0.8;
}

<div></div>

As pointed out, if you need it to scale on different aspect ratio's, use this

body {
  background: url(https://picsum.photos/400/300) center / cover;
}

div {
  position: relative;
  width: 80vw;
  height: 80vh;
  overflow: hidden;
}

div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1000%;
  height: 5000%;
  transform: rotate(45deg) translate(25px,-50%);   /* 25px for the cut height/width */
  transform-origin: left top;
  background: #eee;
  opacity: 0.8;
}

<div></div>

This answer doesn't satisfy the original ask of using a transparent background. It works good for solid color because it sits on top of the main element. — Neil Monroe, Feb 08 '18 at 04:39
@NeilMonroe This answer works even with an image behind, and/or a semi-transparent color on the overlay. See my update. Or did you mean something else? — Asons, Feb 08 '18 at 06:37

How to cut box corner Using CSS with transparent background?

4 Answers4