In this blog, we will learn to create images of different shapes using css3. In my example, I have created images of different shapes like rhombus, hexagon, diamond, octagon.  I have taken four classes rhomb, dia, hexagon and octagon having fixed width and height and transform: rotate  at different angels.

Below written is the HTML code to achieve different shapes

<div class="part">
  <h2>Rhombus</h2>
    <div class="rhom">
      <div class="rhom1">
        <img src="images/rhombus.jpg" alt="" width="320" height="320" />
      </div>
    </div>
</div>


<div class="part">
  <h2>Diamond</h2>
    <div class="dia">
      <div class="dia1">
        <img src="images/rhombus.jpg" alt="" width="320" height="316" />
      </div>
    </div>
</div>


<div class="part">
  <h2>Hexagon</h2>
    <div class="hexagon">
      <div class="hexagon1">
        <div class="hexagon2">
          <img src="images/rhombus.jpg" alt="" width="320" height="313" />
        </div>
      </div>
    </div>
</div>


<div class="part">
  <h2>Octogon</h2>
    <div class="octogon">
      <div class="octogon1">
        <img src="images/rhombus.jpg" alt="" width="320" height="316" />
      </div>
    </div>
</div>

Here is the css code :

/* Rhombus */

.rhom, .rhom div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 250px;
  height: 250px;
}
.rhom {
  transform: rotate(45deg) translateY(10px);
}
.rhom .rhom1 {
  width: 355px;
  height: 355px;
  transform: rotate(-45deg) translateY(-74px);
}
.rhom .rhom1 img {
  width: 100%;
  height: auto;
}


/* Diamond */

.dia, .dia1 {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
.dia{
  transform: rotate(45deg) translateY(-25px) translateX(-25px);
}
.dia .dia1 {
  width: 380px;
  height: 380px;
  transform: rotate(-45deg);
}
.dia img {
  width: 100%;
  height: auto;
}



/* Octogon */

.octogon, .octogon div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
.octogon, .octogon div {
  width: 270px;
  height: 270px;
}
.octogon {
  transform: rotate(45deg);
}
.octogon1 {
  transform: rotate(-45deg);
}



/* Hexagon */

.hexagon, .hexagon div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
.hexagon {
  width: 325px;
  height: 230px;
}
.hexagon div {
  width: 100%;
  height: 100%;
}
.hexagon {
  transform: rotate(120deg);
}
.hexagon1 {
  transform: rotate(-60deg);
}
.hexagon2 {
  transform: rotate(-60deg);
}



body {
  padding: 0; margin: 0;
  font-family: "Open Sans Condensed", "Open Sans", "Droid Sans", sans-serif;
  font-size: 1.2em;
  line-height: 1.7;
  background: #208C8C;
  color: #DFF7E5;
}
h1, h2 {
  font-weight: normal;
  text-align: center;
}
h1 {
  margin-bottom: 0;
}
h2 {
  margin: 0 0 1.7em;
}
p {
  max-width: 600px;
  margin: 3em auto;
  text-align: center;
}
a {
  color: #FFF;
}
.by {
  margin-top: 0;
  opacity: .5;
  transition: opacity .4s;
}
.by:hover,
.by a:focus {
  opacity: 1;
}
.by, .photos {
  font-size: .8em;
}
.part {
  padding: 50px 20px 85px;
  background: #668cff;
  color: #00061a;
}
.part:nth-of-type(2n) {
  background:  #ffb3ff;
  color: #990099;
}

.hexagon img {
  position: relative;
  top: -25px;
  left: 20px;
}
.octogon div img {
  position :relative;
  left:-5px; top: -5px;
}
.dia img {
  position: relative;
  width: 105%; left: -7px; top: -5px;
}

Note: This example is running successfully on all latest browses.