Создать дугу из элемента div не так просто. Также использование тега div для создания фигур и графики не является хорошим способом, вместо этого вы должны использовать масштабируемую векторную графику (SVG), HTML Canvas, WebGL или любые другие библиотеки JS.
Используя тег div, вы можете создать нижнюю дугу, добавив радиус нижней границы:
.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>
Но вы не можете получить верхнюю дугу, используя верхний радиус границы, потому что его использование создаст дугу в противоположном направлении и, таким образом, создаст овал вместо арки.
Одна вещь, которую вы можете сделать, это наложить на верхнюю часть прямоугольника другой тег div белого цвета, чтобы создать эффект арки.
.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>
Но это не выглядит хорошо. поэтому использование div, вероятно, не лучший способ получить желаемый результат.
Вместо этого попробуйте использовать SVG: в приведенном ниже примере мы создаем арку, используя линии и кривые, отображая значения пикселей и заливая форму определенным цветом.
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>
В приведенном ниже коде мы просто создаем кривую линию, но толщиной 50 пикселей.
<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>
Используйте Canvas: Canvas похож на Svg, но использует javascript для создания пути и графики.
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>
Хотя SVG и Canvas используются только для создания 2D-графики, тем не менее, вы можете использовать 2D-объекты вместе для создания 3D-иллюзии.
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 и Canvas выглядят пугающе, но это не так сложно, как кажется. Вы можете прочитать документацию или посмотреть учебные пособия на Youtube, чтобы изучить его правильно.
05.07.2021
