小编Leo*_*ion的帖子

我需要在那个方块的悬停上旋转效果,我能得到的是下面写的.

HTML

<div class="mainSquare">
  <div class="firstInnerSquare">
    <div class="lastInnerSquare">
      Hello
    </div>
  </div>
</div>

CSS

.mainSquare{
  width:160px;
  height:160px;
  background:black;
  margin: 50px auto;
  padding:25px;
}
.firstInnerSquare{
  width:110px;
  height:110px;
  background:red;
  padding:25px;
}
.lastInnerSquare{
  text-align:center;
  width:110px;
  padding: 46px 0px;
  background:white;
}

小提琴

希望得到帮助.

我试图用css和html创建这个图像,但是我仍然无法获得如图所示的完美曲线和阴影.

HTML

<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

CSS

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.square{
  width:100px;
  height:100px;
  background:#df1c40;
  float:left;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 42px;
}
.square2{
  width:100px;
  height:100px;
  background:#ff9c28;
  float:left;
  transform: skew(180deg,150deg);
  position: absolute;
  left:100px;
  top: 42px;
}
.square3{
  width:117px;
  height:100px;
  background:#97bbdd;
  float:left;
  transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
  position: absolute;
  left: -1px;
  top: -31px;
}
.square3:before {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: …