How to create this shape using CSS

Question

The shape under red border:

I tried very hard to achieve this shape using CSS3 but all time I failed. I also tried to add border-bottom and border-left. See CSS code for understanding what I was doing:

#trapezoid {
  background: blue;
  height: 100px;
  width: 100px;
  margin: auto;
}
#trapezoid:before {
  content: "";
  position: absolute;
  border-top: 50px solid red;
  border-left: 50px solid transparent;
  margin: 50px 0px 0px -50px;
  transform: rotate(0deg);
}
#trapezoid:after {
  content: "";
  position: absolute;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  margin: 50px 0px 0px 100px;
  transform: rotate(0deg);
}

<div id="trapezoid"></div>

This CSS shape almost close to my requirement but we can't use image in extended area. Please suggest me some other method. Challenge is this, I have to create same layout and at place of grey background I've to show some content

Use SVG. Unless you can have non-transparent background where currently is grey color — Justinas
– Justinas, Commented Jul 11, 2017 at 6:49
Challenge is this, I have to create same layout and at place of grey background I've to show some content (may be Sliders or Other Image) — Amar Arya
– Amar Arya, Commented Jul 11, 2017 at 8:20

Akshay · Accepted Answer · 2017-07-11 07:01:58Z

2

If you have a solid background color try this

body {
  background: grey;
  margin: 0;
}

.container {
  width: 100%;
  height: 200px;
  background: url("http://lorempixel.com/1000/300/nature/3");
  background-size:cover;
}

.content {
  height: 100px;
  color: #fff;
}

.shape {
  position: relative;
  height: 100px;
  overflow:hidden;
}

.shape:after {
  content: "";
  position: absolute;
  width: 40%;
  height: 100%;
  background: grey;
  top: 0;
  transform: skew(30deg);
  left: -10%;
}

.shape:before {
  content: "";
  position: absolute;
  width: 40%;
  height: 100%;
  background: grey;
  top: 0;
  transform: skew(-30deg);
  right: -10%;
}

<div class="container">
  <div class="content">
    Contents
  </div>
  <div class="shape"></div>
</div>

answered Jul 11, 2017 at 7:01

Akshay

14.4k5 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

VilleKoo Over a year ago

You could do this with just one div though.

Akshay Over a year ago

@VilleKoo yes i used two (childs) so that contents can be added and styled (vertical centering is also possible now)

Amar Arya Over a year ago

This trick is pretty much ok, But What If I want to display some other info in at grey background? Challenge is this, I have to create same layout and at place of grey background I've to show some content

Akshay Over a year ago

@AmarArya For that you will have to use svg

Ori Drori · Accepted Answer · 2017-07-13 20:41:40Z

1

Depending on the browser support needed, You can use clip-path:

#trapezoid {
  background: url(https://upload.wikimedia.org/wikipedia/commons/8/83/Jho_Arce_User_Profile_Image.jpg) no-repeat;
  background-size: cover;
  height: 100px;
  width: 200px;
  margin: auto;
  -webkit-clip-path: polygon(100% 0, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0);
  clip-path: polygon(100% 0, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0)
}

body {
  background: silver;
}

<div id="trapezoid"></div>

edited Jul 13, 2017 at 20:41

answered Jul 11, 2017 at 7:12

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Comments

Gerard · Accepted Answer · 2017-07-11 07:04:57Z

0

Using :before and :after to place 2 triangles at the bottom

#trapezoid {
width: 200px;
height: 100px;
background-color: red;
position: relative;
}
#trapezoid:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 30px;
border-color: transparent transparent white transparent;
display: block;
transform: rotate(-135deg);
position: absolute;
bottom: -5px;
left: -20px;
}
#trapezoid:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 30px;
border-color: transparent transparent white transparent;
display: block;
transform: rotate(135deg);
position: absolute;
bottom: -5px;
right: -20px;
}

<div id="trapezoid"></div>

answered Jul 11, 2017 at 7:04

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

Comments

Jithin Raj P R · Accepted Answer · 2017-07-11 07:06:49Z

0

I think this will do the trick. Hope it will works for you.

.main-box{
  background:#ddd;
  width:300px;
  height:100px;
  display:inline-block;
  position:relative;
  text-align:center;
}
.main-box:after{
  content:'';
  width: 0;
  height: 0;
  border-bottom: 70px solid #999;
  border-right: 70px solid transparent;
  position:absolute;
  left:0;
  bottom:0;
}
.main-box:before{
  content:'';
  width: 0;
  height: 0;
  border-bottom: 70px solid #999;
  border-left: 70px solid transparent;
  position:absolute;
  right:0;
  bottom:0;
}

<div class="main-box"> #trial</div>

answered Jul 11, 2017 at 7:06

Jithin Raj P R

6,8469 gold badges41 silver badges71 bronze badges

Collectives™ on Stack Overflow

How to create this shape using CSS

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related