Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create different shape images in css3?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 381
    Comment on it

    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.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: