Leo the lion Leo the lion - 6 months ago 13
CSS Question

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

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.

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

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>

Comments