How do I change the shape of a div

Question

I was wondering how I change the shape of a div with CSS. I have done some research on it and found out about the 'skew' option, however, none of the examples I have seen give the shape I'm looking for. Here is an image of what I'm looking for.

The examples are there to show you how it works so you can adjust it to your needs. That's how you learn new things, not by copy-pasting it. — Bram Vanroy, Jan 18 '17 at 19:49

score 2 · Accepted Answer · edited May 23 '17 at 12:09

2

There are many different approaches and the best you can do when learning CSS is to try it on your own. So before having a look at the below approach I suggest to look at these resources:

.pattern-column {
  position: relative;
  overflow: hidden;
  background: darkgrey;
  width: 60px;
}
.pattern-column div {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid darkgrey;
  border-bottom: 50px solid transparent;
  margin-left: -40px;
  margin-top: -30px;
}
.pattern-column div:nth-child(2n) {
  border-left: 100px solid grey;
  border-right: 0;
  margin-left: 0;
}
.pattern-column div:nth-child(3n) {
  border-right-color: #ccc;      
  border-left-color: #ccc;
}

<div class="pattern-column">
  <div></div>
  <div></div>
  <div></div>
</div>

edited May 23 '17 at 12:09

Community

1
1

answered Jan 18 '17 at 19:58

Marvin

9,164
3
26
44

I had a look at those links, and will more than likely use them a lot now that I know about them. The code was also what I was looking for, so with a bit of tweaking, I should be able to get it to work. Thanks for the response. – Jan 18 '17 at 20:16
One question, it may be a very simple answer, but how would I scale it all up so that it fills the whole browser window? – Jan 18 '17 at 20:22
It took me a while to get into the right direction, but it seems pretty time consuming to make it perfectly work and not as easy as I thought. This is what I came up with: [JSFiddle](https://jsfiddle.net/Lcye6eyv/). Using triangles like described above isn't the way to go then, because you can't set the border-width to a percentage width. Anyway I hope my attempt can help you. Otherwise you could think about using a repeating background image. – Marvin Jan 18 '17 at 21:12

score 0 · Answer 2 · answered Jan 18 '17 at 19:48

0

If it is pixel perfect I would create a container with position:relative and define the width and height and set it to overflow:hidden. Then create three divs to be contained inside and use transform:rotate(XXdeg) for each item with position:absolute and then z-index them to overlay eachother accordingly. Give that a go.

answered Jan 18 '17 at 19:48

Adrianopolis

1,272
1
11
15

can you give example – Jovylle Dec 21 '20 at 00:15

How do I change the shape of a div

2 Answers2

Linked