CODEWITHSUNDEEP
htmlcss3d
Jon Kantner
Jon Kantner

Reputation: 603

Rounded Rectangular Prisms in CSS

Using CSS, I am trying to create a rectangular prism with rounded edges like those in the photo below.

Rounded edges on Nintendo 64

So far, I have specified the border radius for the top and bottom sides. The problem is that I do not know a way to get the left and right edges of the other sides to curl inwards. As a result, there should not be any holes at the corners. Is there a certain CSS property or trick I could use to do that?

Rectangular prism

Code from https://jsfiddle.net/jkantner/oqo73a2h/:

.cube {
  top: 100px;
  left: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(-45deg);
}

.left, .right, .front, .top, .back, .bottom {
  position: absolute;
}

.left, .right {
  background: #06a;
  width: 150px;
  height: 150px;
}

.front, .back {
  background: #048;
  width: 300px;
  height: 150px;
}

.top, .bottom {
  background: #08c;
  border-radius: 30px;
  width: 300px;
  height: 150px;
}

.front {
  z-index: 2;
}

.top {
  transform-origin: 0% 100%;
  transform: translateY(-150px) rotateX(-90deg);
  z-index: 2;
}

.left {
  transform-origin: 100% 100%;
  transform: translateX(-150px) rotateY(90deg);
  z-index: 2;
}

.right {
  transform-origin: 0% 0%;
  transform: translateX(300px) rotateY(-90deg);
}

.back {
  transform: translateZ(150px);
}

.bottom {
  transform-origin: 0% 0%;
  transform: translateY(150px) rotateX(90deg);
}
<div class='cube'>
  <div class='front'></div>
  <div class='top'></div>
  <div class='left'></div>
  <div class='right'></div>
  <div class='back'></div>
  <div class='bottom'></div>
</div>

Upvotes: 3

Views: 899

Answers (1)

Kevin Wang
Kevin Wang

Reputation: 281

If you specify the border-radius for the left and right sides and the front and back sides, just as you did for the top and bottom:

.left, .right {
  background: #06a;
  border-radius: 30px;
  width: 150px;
  height: 150px;
}

.front, .back {
  background: #048;
  border-radius: 30px;
  width: 300px;
  height: 150px;
}

You will get a rounded rectangular prism, as seen here.

Upvotes: 2

Related Questions