CODEWITHSUNDEEP
htmlcsscss-shapes
Amar Arya
Amar Arya

Reputation: 15

How to create this shape using CSS

The shape under red border:

enter image description here

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

Upvotes: 0

Views: 228

Answers (4)

Ori Drori
Ori Drori

Reputation: 193248

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>

Upvotes: 1

Jithin Raj P R
Jithin Raj P R

Reputation: 6827

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>

Upvotes: 0

Gerard
Gerard

Reputation: 15796

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>

Upvotes: 0

Akshay
Akshay

Reputation: 14378

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>

Upvotes: 2

Related Questions