Div at an angle

Question

I would like to make my div have a pointy angle but I am not sure of what is the best way to do it.

.top-div {
  width: 310px;
  height: 25px;
  background-color: #A52432;
}

<div class="top-div"></div>

Pointy red div image

score 2 · Answer 1 · edited Jun 08 '18 at 08:16

2

For this kind of effect you could use CSS and make a clip-path like this:

.top-div {
      width: 310px;
      height: 25px;
      background-color: #A52432;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
}

<div class="top-div"></div>

edited Jun 08 '18 at 08:16

Meghan

1,215
11
17

answered Jun 08 '18 at 08:13

billy.farroll

1,903
2
15
23

Thank you very much for the answer. I wasn't aware of how polygons worked before in css learnt something new thanks. – SW2702 Jun 08 '18 at 08:30
1

keep in mind that clip-path doesn't work in IE and Edge https://caniuse.com/#search=clip-path – Maharkus Jun 08 '18 at 08:36
1

Due to browser support I have decided to use linear-gradient – SW2702 Jun 08 '18 at 08:42

score 1 · Accepted Answer · answered Jun 08 '18 at 08:30

1

You can do it with a simple linear-gradient() which has greater support than clip-path:

.top-div {
  width: 310px;
  height: 25px;
  background: linear-gradient(45deg, transparent 10%, #A52432 10.01%);
}

<div class="top-div"></div>

answered Jun 08 '18 at 08:30

VXp

11,598
6
31
46

1

Interesting this will come in handy in the future thanks :) – SW2702 Jun 08 '18 at 08:34
1

Decide to use in current project due to support as linear-gradient is more supported than clip-path as seen here https://caniuse.com/#search=linear-gradient vs https://caniuse.com/#search=clip-path – SW2702 Jun 08 '18 at 08:53

score 0 · Answer 3 · answered Jun 08 '18 at 08:12

0

A div is always a rectangle. I would suggest to place a svg with <polgon> on the divs position (see Polygons).

answered Jun 08 '18 at 08:12

mixable

1,068
2
12
42

Thanks a lot for the link I've had a look through it now :) – SW2702 Jun 08 '18 at 08:31

Div at an angle

3 Answers3