Giving div a none rectangular shape

Question

I want to give a div none rectangular shape (look at the image below to see, how div should look). I've tried several transforms, but couldn't achieve the desired result. Here is a code snippet

.container {
  height: 60px;
  background: #252b33;
  display: flex;
  align-items: flex-end;
}
.tab {
  background: #3b424b;
  height: 40px;
  width: 150px;
  margin: 0 50px
}
.tab1 {
  transform: skewX(-45deg);
}
.tab2 {
  transform: rotateX(45deg);
}

<div class="container">
  <div class="tab"></div>
  <div class="tab tab1"></div>
  <div class="tab tab2"></div>
</div>

My question is: How can I give a div shape shown in the image using CSS?

transform: skewX(-45deg); gave the best result, however left and right sides still were parallel — Misho Tek, Oct 07 '18 at 06:32
I mean show your relavant html with css code in snnipet(edit your question) — לבני מלכה, Oct 07 '18 at 06:33
No I didn't. I think a sollution with div would be much better, but if it's impossible, I guess the only way will be to use an svg — Misho Tek, Oct 07 '18 at 06:42

לבני מלכה · Accepted Answer · 2018-10-07T06:56:05.283

2

Use css as below to .tab

border-bottom: 40px solid #555;
border-left: 20px solid transparent;
border-right: 20px solid transparent;

See here:

.container {
  height: 60px;
  background: #252b33;
  display: flex;
  align-items: flex-end;
}
.tab {
  height: 40px;
  width: 150px;
  margin: 0 0px;
  border-bottom: 40px solid #555;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

<div class="container">
  <div class="tab"></div>
  <div class="tab tab1"></div>
  <div class="tab tab2"></div>
</div>

edited Oct 07 '18 at 06:56

answered Oct 07 '18 at 06:46

לבני מלכה

15,925
2
23
47

tell me for more help:) – לבני מלכה Oct 07 '18 at 06:46

Giving div a none rectangular shape

1 Answers1