CODEWITHSUNDEEP
csscss-shapes
Smart Athiyas
Smart Athiyas

Reputation: 77

How to create custom shapes using css3 in div?

I'm trying to achieve following shape using CSS3 without using canvas, can anyone help me to achieve this following shape?

enter image description here

Upvotes: 1

Views: 178

Answers (3)

Siderite Zackwehdex
Siderite Zackwehdex

Reputation: 6570

transform: skewY(Ndeg) to get the angle effect, then either margins or transform: translateY(Npx) to move the divs vertically. Working example: 

.red,
.green {
  width: 100px;
  height: 50px;
  float: left;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

.red {
  background: red;
}

.green {
  background: lime;
}

.first {
  /*margin-top:56px;*/
  transform: translateY(56px)
}

.second {
  transform: skewY(150deg) translateY(28px);
  /*transform: skewY(150deg);
  margin-top:28px;*/
}

.second span {
  transform: skewY(30deg);
  display: inline-block;
}

.third {}
<div id="container">
  <div class="red first"><span>div</span></div>
  <div class="green second"><span>div</span></div>
  <div class="red third"><span>div</span></div>
</div>

Upvotes: 2

web-tiki
web-tiki

Reputation: 103780

You can use CSS 2D transforms with skewY :

div{
  position:relative;
  width:200px; height:50px;
  background:green;
  margin:0 100px;
  transform-origin:100% 0;
  transform:skewY(-30deg);
}
div:before, div:after{
  content:'';
  position:absolute;
  top:0;
  width:50%; height:100%;
  transform:skewY(30deg);
  background:red;
}
div:before{
  right:100%;
  transform-origin:100% 0;
}
div:after{
  left:100%;
  transform-origin:0 0;
}
<div></div>

Note that you need to add the vendor prefixes according to the browsers you need to support. More info on canIuse

Upvotes: 3

fbid
fbid

Reputation: 1570

You can use the transform:skew() CSS property

Here is a code example

.rect {
  width:100px;
  height: 50px;
  background: red;
}

.skew {
  width: 100px;
  height: 50px;
  background:#33FF99;
  transform:skew(0deg,-27deg);
}

.r1, .r2, .s1{
  position:absolute;
}

.r1{
  top:60px;
  left:0;
}

.r2 {
  top:10px;
  left:200px;
}

.s1{
  top:35px;
  left:100px;
}
<div class="rect r1"></div>
<div class="skew s1"></div>
<div class="rect r2"></div>

Upvotes: 1

Related Questions