how can i make divs rorate but not the content in it?-CodePudding

i can rotate the div or implement the clip-path property on to it. but i am not getting desire results with my approach. i have searched the codepen and other results from google search but nada.

i have used clip-path and skew property on the div but again i think i am not following the correct approach.i want to make my div lie on to each other with appropriate spacing and in the skew state as you can see.

i want it like that...... here is what i want

CodePudding user response：

I think you want something like this, I used transform property to do it:

.flexContainer {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}

.flexContainer>* {
    flex: 0 0 33%;
}

.theContainer {
    margin: 0 0.5em;
    padding: 2em 2em 7em 2em;
    color: #000;
    display: block;
    width: 100px;
    height: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px #ededed;
    transform: skew(0, -5deg);
}

.theContainer.first {
  margin-top: 1.5em;
}

.theContent {
  position: absolute;
  transform: skew(0, 5deg);
}

<div >
  <div >
    <div >
      <h2> Title </h2>
      <p> Content test </p>
    </div>
  </div>

  <div >
    <div >
      <h2> Title </h2>
      <p> Content test </p>
    </div>
  </div>

  <div >
    <div >
      <h2> Title </h2>
      <p> Content test </p>
    </div>
  </div>
  
  <div >
    <div >
      <h2> Title </h2>
      <p> Content test </p>
    </div>
  </div>
</div>

CodePudding user response：

Hope this helps...

<div >
  <div >
    <h1>1</h1>
  </div>
  <div >
    <h1>2</h1>
  </div>
  <div >
    <h1>3</h1>
  </div>
  <div >
    <h1>4</h1>
  </div>
</div>
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    transform: skew(0, -6deg);
  }
  .container .item {
    text-align: center;
    width: 40%;
    margin: 10px;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
  .container .item h1 {
    transform: skew(0, 6deg);
  }
</style>