如何使用内部阴影创建具有曲线的角的立方体？

Question

我试图用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: 0px;
  border-bottom: 70px solid #28a55c;
  border-left: 70px solid transparent;
  -webkit-box-shadow: 5px 0px 0px -1px #879fd1;
  -moz-box-shadow: 5px 0px 0px -1px #879fd1;
  box-shadow: 5px 0px 0px -1px #879fd1;
  transform: rotate(90deg);
}
.square3:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-top: 70px solid #F3F5F6; 
  border-right: 70px solid transparent;
  transform: rotate(90deg);
}

我最好的尝试.我只是为了我的知识这样做,任何有点细节的帮助都会欣赏.. :)

Answer 1

顶部的弯曲区域可以在某种程度上使用radial-gradient背景而不是使用边框方法来创建三角形.

这适用于Chrome(v51.0.2704.7 dev-m),Opera(v36.0),Firefox(v45.0.2),Edge和IE11.它也适用于Safari(在iPhone上测试).

.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;
  overflow: hidden;
}
.square3:before {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 70px;
  height: 70px;
  padding: 0px 8px 0px 0px;
  background: radial-gradient(ellipse 100px 35px at 45% 110%, #97bbdd 50%, rgb(40, 165, 92) 52%, rgb(40, 165, 92) 55%, transparent 56%);
  background-size: 90% 100%;
  background-repeat: no-repeat;
  transform: rotate(90deg);
}
.square3:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 62px;
  height: 70px;
  padding: 0px 8px 0px 0px;
  background: radial-gradient(ellipse 20px 90px at 110% 50%, transparent 50%, rgb(40, 165, 92) 50%, rgb(40, 165, 92) 62%, transparent 63%), radial-gradient(ellipse 20px 90px at 110% 50%, transparent 50%, rgb(138, 159, 212) 50%, rgb(138, 159, 212) 60%, transparent 70%), linear-gradient(to bottom right, white 45%, rgb(40, 165, 92) 46%), linear-gradient(to bottom right, white 48%, rgb(138, 159, 212) 49%);
  background-clip: border-box, border-box, content-box, border-box;
  background-size: 95% 100%, 100% 85%, 100% 100%, 95% 85%;
  background-repeat: no-repeat;
  transform: rotate(90deg);
  z-index: -1;
}

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