How to create Cube with inner shadow to corner with curve?

Question

I am trying to create this image with css and html but m kept failing to get perfect curve and shadow as shown in image.

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);
}

My best try. I am just doing this for my knowledge and any help with little bit detail will be appreciate.. :)

Answer 1

i played also with gradient from a single div and 2 pseudos:

The idea is to pile bits of gradients to shape the curved parts.

#cube{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #DF1C40;
  color: white;
  width: 75px;
  height: 182px;
  margin: 78px;
  position: relative;
  transform: skew(40deg, 10deg) rotate(40deg);
}

#cube:before,
#cube:after {
  display: inherit;
  align-items: center;
  justify-content: center;
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  right: 0px;
  bottom: 0;
  background: #FF9D28;
  border-radius: inherit;
  box-shadow: inherit;
  transform: translate(100%, -50%) skew( 0deg, -67deg) rotate(0deg);
}

#cube:after {
  content: '';
  top: 0px;
  left: 0;
  height: 106%;
  right: 0;
  width: 85%;
  bottom: 0;
  transform: translate(68%, -96%) rotate(30deg)skew(7deg, -30deg);
  background: 
    linear-gradient(to top left, white 42%, transparent 43%),  
    linear-gradient(141deg, transparent 80%, white 75%), 
    linear-gradient(-265deg, transparent 80%, white 75%),
    linear-gradient(-5deg, #28A55c  45%, transparent 46%) 20px -6px no-repeat, 
    linear-gradient(25deg, #28A55c  45%, transparent 46%) 7px 38px no-repeat,  
    linear-gradient(-97deg, #28A55c  44%, transparent 46%) 2px 38px no-repeat, 
    linear-gradient(140deg, transparent 45%, #28A55c  46%) 22px 16px no-repeat,
    linear-gradient(265deg, #28A55c 0%, transparent 0%) -17px 46px no-repeat, 
    linear-gradient(272deg, #28A55c 50%, transparent 51%) -7px 120px no-repeat,  
    linear-gradient(267deg, #28A55c 50%, transparent 51%) -13px 75px no-repeat, 
    linear-gradient(265deg, #28A55c 45% , transparent 46% ) -20px 46px no-repeat, 
    linear-gradient(-95deg, rgba(0, 0, 0, 0.1) 45%, transparent 46%) -23px 48px no-repeat, 
    linear-gradient(to bottom right, #97BBDD 58%, transparent 58%);
  background-size: 100% 100%, auto, auto, 60% 50%,60% 5%,13% 10%, 60% 45%, 100% 70%, 60% 45%, 80% 45%, auto;
}
body {
  background:#333;
  font-family:tahoma;
  font-weight:bold
    }

p {position:absolute;color:white;}

<p>wich is which ?</p>
<div id="cube">
  CSS <br/> box
</div>

<img src="https://i.sstatic.net/0Y3vw.png"/>

codepen to play with

Answer 2

The curved areas in the top can be achieved to some extent using radial-gradient for background instead of using the border method to create the triangles.

This works in Chrome (v51.0.2704.7 dev-m), Opera (v36.0), Firefox (v45.0.2), Edge and IE11. It also works in Safari (tested on 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>

Answer 3

I have played with linear-gradient & Position property to get similar design.

As you can see i had to take few extra element for curve. For more detail about corner read here

Hope it will help..

.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: 2%;
right: 0%;
left: 44%;
width: 0px;
height: 0px;
border-bottom: 60px solid transparent;
border-left: 60px solid transparent;
-webkit-box-shadow: 6px 0px 0px -1px #879fd1;
-moz-box-shadow: 6px 0px 0px -1px #879fd1;
box-shadow: 6px 0px 0px -1px #879fd1;
transform: rotate(84deg);
z-index:0;
}
.square3:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-top: 73px solid #FFF; 
  border-right: 73px solid transparent;
  transform: rotate(90deg);
}



#fpc_page-tip:before, #fpc_page-tip:after {
background-color: #FFF;
position: absolute;
display: block;
z-index: 2;
border-top-right-radius: 60%;
width: 50%;
height: 50%;
content: "";
}
#fpc_page-tip:before {
right: 96%;
top: 0%;
background: -webkit-radial-gradient(-180% 200%, circle, rgba(151,187,221,1) 85%, rgba(135,159,209,.8) 93%);
border-right: solid 2px #28A55C;
box-shadow: 17px -3px 1px -18px #FFF;
z-index: -1;
}
#fpc_page-tip:after {
top: 96%;
right: 0%;
background: -webkit-radial-gradient(-250% 320%, circle, rgba(151,187,221,0) 85%, rgba(135,159,209,.8) 93%);
border-top: solid 2px #28A55C;
box-shadow: 17px -3px 1px -18px #FFF;
z-index: 0;
}
#fpc_corner-box {  /* edit these sizes for the default revealing corner size */
height: 20px;
width: 20px;
right: 0;
top: 0;
position: absolute;
overflow: visible;
height: 65px;
width: 65px;
}
#fpc_corner-box:before {
position: absolute;
top: 0;
right: 0;
/*content: "";*/
display: block;
width: 100%;
height: 100%;
}
#fpc_page-tip {
position: absolute;
top: 0;
right: 0;
content: "";
background: -webkit-linear-gradient(45deg, #28a55c 17%, #28a55c 18%, #48A26E 30%, #41A76B 34%, #2FCA70 49%, rgba(200,200,200,0) 36%);
display: block;
width: 100%;
height: 100%;
}
#fpc_corner-box, #fpc_page-tip {
-webkit-transition-property: all;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
}

<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3">
<div id="fpc_corner-box">
  <a id="fpc_page-tip" href="#">
  </a>
</div>
  </div>
</div>