CSS - create complex shape

Question

Is there any simple way using CSS to make this shape?

This is a dupe and would have been easy to find with a simple search. Research before just asking! — Stewartside, Aug 26 '16 at 08:55
But another found solutions look a complex.. for one div three div styles. I have a lot of divs with similiar styles but still different and it 'll be a lot of codes... because of this i am looking for something more simple. — Lukáš Unzeitig, Aug 26 '16 at 09:16

score 0 · Answer 1 · answered Aug 26 '16 at 08:46

Yes it can be done. see the below code.

.shape {
    width: 200px;
    height: 100px;
    background: #000;
    margin: 20px 150px;
    position: relative;
}

.shape:after {
        content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid #000000;
    border-bottom: 50px solid #fff;
    border-left: 50px solid #000000;
    border-right: 50px solid #fff;
    position: absolute;
    top: 0;
    right: -99px;
}

.shape:before {
        content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid #000000;
    border-bottom: 50px solid #fff;
    border-left: 50px solid #fff;
    border-right: 50px solid #000000;
    position: absolute;
    top: 0;
    left: -99px;
}

<div class="shape"></div>

score 0 · Accepted Answer · answered Aug 26 '16 at 08:47

0

You can use rotateX() and perspective() to create shape like this.

.shape {
  width: 250px;
  height: 70px;
  border: 2px solid black;
  border-top: 1px solid black;
  margin: 50px;
  transform: perspective(10px) rotateX(-2deg);
}

<div class="shape"></div>

answered Aug 26 '16 at 08:47

Nenad Vracar

118,580
15
151
176

Ou, thanks ! this is so simple and it works! – Lukáš Unzeitig Aug 26 '16 at 08:54
4

You're a high enough rep user with enough CSS upvotes to know this should have been a dupe.... – Stewartside Aug 26 '16 at 08:54
Btw, is there any way to limitation scale of inside divs.. ? I – Lukáš Unzeitig Aug 26 '16 at 09:05
@Lukáš Unzeitig Not sure if this is what you mean but you can set `transform-style: preserve-3d;` on parent and then reverse transforms on child https://jsfiddle.net/Lg0wyt9u/1151/ – Nenad Vracar Aug 26 '16 at 09:15

CSS - create complex shape

2 Answers2