How i can create curved 3d objects with html and css - html

Question

I have an html/css 3d object as in picture 2. I want to make it curve a little bit as in picture 1
Does someone have an idea perhaps how it could be achieved Or if there is any other technology by which I can shape these 3d objects ?
This is the code for my object in the picture 2:
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.cube {
background: #dc2e2e;
width: 200px;
height: 50px;
position: relative;
margin: 50px;
transform: rotate(32deg);
}
.cube::before {
content: '';
display: inline-block;
background: #f15757;
width: 200px;
height: 2px;
transform: skewX( -80deg);
position: absolute;
top: -2px;
left: 6px;
}
.cube::after {
content: '';
display: inline-block;
background: #9e1515;
width: 12px;
height: 50px;
transform: skewY(-10deg);
position: absolute;
top: -1px;
left: 100%;
}
<div class="container">
<div class="cube"></div>
</div>

Answer 1

Creating an arc out of a div element is not so straightforward . Also using div tag to create shapes and graphics is not a good way instead you should use Scalable Vector Graphics(SVG), HTML Canvas, WebGL or any other JS libraries.
Using div tag you can create a bottom arc by adding bottom border radius:
.cube {
background: #dc2e2e;
width: 200px;
height: 50px;
position: relative;
margin: 50px;
box-shadow: 0px 10px 16px -6px black;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
<div class="container">
<div class="cube"></div>
</div>
But you can't achieve a top arc using the border top radius because using it will create an arc in opposite direction and thus create an oval instead of an arch.
One thing you can do is to overlay the upper part of the rectangle with another div tag of white color to create an arch like effect.
.arch {
width: 200px;
overflow: hidden;
}
.lowerarc {
width: 240px;
position: relative;
right: -10px;
left: -20px;
height: 80px;
background-color: black;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.upperarc {
height: 80px;
position: relative;
width: 240px;
top: -120px;
right: -10px;
left: -20px;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
<div class="arch">
<div class="lowerarc"></div>
<div class="upperarc"></div>
</div>
But it doesn't look good. so using div is probably not the best way to get the desired result.
Try using SVG instead:
In this example below we create an arch using lines and curves by plotting pixel values and filling the shape with a specific color.
M means move to, L to create a line, Q to draw curves, and z to close the path and the number corresponding to it are the values in pixel
<svg width="200">
<path d="M0,0 L0,50 Q100,80 200,50 L200,0 Q100,25 0, 0z" fill="black" />
</svg>
In this code below, we just create a curve line but with a 50px thickness.
<svg viewBox="0 0 1000 400">
<path d="M 60,250 C 60,150 150,50 250,50" fill="none"
stroke="green" stroke-width="50"></path>
</svg>
Use Canvas:
Canvas is similar to Svg but it uses javascript to create path and graphics.
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.beginPath();
c.moveTo(60, 0);
c.lineTo(10, 0);
c.quadraticCurveTo(0, 170, 170, 250);
c.lineTo(195, 210);
c.quadraticCurveTo(50, 150, 60, 0);
c.fill();
<canvas id="canvas" width="622" height="1080"></canvas>
While SVG and Canvas are used to create 2D graphics only,but still you can use 2D objects together to create a 3D like illusion.
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.fillStyle="rgba(0, 0, 25, 0.7)";
c.beginPath();
c.moveTo(10, 0);
c.lineTo(0, 5);
c.quadraticCurveTo(-10, 180, 170, 260);
c.lineTo(195, 220);
c.lineTo(195, 210);
c.quadraticCurveTo(30, 250, 60, 0);
c.fill();
c.fillStyle="rgb(200, 210, 200)";
c.beginPath();
c.moveTo(60, 0);
c.lineTo(10, 0);
c.quadraticCurveTo(0, 165, 170, 250);
c.lineTo(195, 210);
c.quadraticCurveTo(50, 135, 60, 0);
c.fill();
<canvas id="canvas" width="622" height="1080"></canvas>
<script src="main.js">
</script>
SVG and Canvas codes looks scary but it is not as difficult as it looks like. You can read documentations or watch Youtube tutorials to learn it properly.

Answer 2

Making curved 3d objects in pure html/css is not very easy but it is doable. There a few techniques to do it but you will need to understand exactly what you want and how to alter the number to achieve it.
You can stack multiple div elements to create a curved 3d effect and then offset the z axis for each one. Essentially you are just stacking lots of elements together to give the illusion of a curved 3d object. In the below links I use radial gradient.
I would recommend using a pre-proccessor like SCSS for this as it allows you to run a loop to offset each element cutting out a lot of code you would have to write for each element. Also keep in mind if you intend to animate this after then that will be very taxing on the processing depending on device. If you are trying to make it static then it shouldn't be an issue.
SCSS
#for $i from 1 through 20 {
$color: red;
&:nth-child(#{$i}) {
position: absolute;
width: $width;
height: $height;
list-style: none;
background: rgb(0, 0, 0);
background: radial-gradient(
circle at 50% 150%,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 60%,
darkred 60%,
darkred 70%,
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0) 100%
);
transform: translateZ(-20px + (0.8px * ($i - 1)));
filter: blur(0px) contrast(200%);
}
simple curves example 1 https://codepen.io/jfirestorm44/pen/MWmKraz?editors=0100
complex art example 2 https://codepen.io/jfirestorm44/pen/qBZYQBL
Like I said about performance; Example 2 will take some processing power and may lag. The object can be rotate by clicking.

Answer 3

I'd like to add to #Miran Firdausi's answer about SVGs (but I can't comment yet). A good way to create SVGs and then "hard code" them into CSS is to use any vector paint program (such as Inkscape) to draw exactly what you want, then save as SVG.
You can open the .svg file in your code editor and you will see XML markup, including codes which you can copy into your HTML, like in #Miran's example:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" version="1.1" role="img" aria-hidden="true" focusable="false">
[copy the <path> elements here]
</svg>
Or save the .svg file somewhere and refer to it in your CSS:
/* Add calendar icon */
.wp-social-link.my-calendar-icon > a {
background-image: url(assets/images/my-calendar.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 36px;
width: 54px;
height: 54px;
filter: invert(100%) brightness(100%) contrast(100%);
}