Создание круглого элемента с внутренней тенью в CSS довольно прямолинейно, вы можете использовать свойства `border-radius` и `box-shadow`. Вот пример того, как создать такой элемент:
```css
.circle {
width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 50%;
box-shadow: inset 0 0 10px #000000; /* x-offset, y-offset, blur-radius, color */
}
```
```html
<div class="circle"></div>
```
Для создания сегмента круга, например, 60 градусов, и добавления внутренней тени, вы можете использовать `clip-path` для создания формы кругового сектора и подобное свойство `box-shadow` для внутренней тени. Пример кода для этого:
```css
.circle-segment {
width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 50%;
box-shadow: inset 0 0 10px #000000;
clip-path: polygon(50% 50%, 100% 50%, 100% 0); /* настройте точки для создания сектора на 60 градусов */
transform: rotate(-30deg); /* поворачиваем на половину угла, чтобы добиться централизации сектора */
}
```
```html
<div class="circle-segment"></div>
```
Однако, `clip-path` может быть немного сложнее в использовании для точного создания сектора конкретных градусов, и `polygon` не лучший выбор для круговых форм. Вместо этого вы можете использовать радиальные градиенты или SVG, чтобы создать более точные фигуры. В случае с CSS, это будет выглядеть следующим образом:
```css
.pie {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(
#3498db 0deg,
#3498db 60deg,
transparent 60deg,
transparent 360deg
);
position: relative;
}
.pie::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
clip-path: inset(0 round 50%);
}
```
```html
<div class="pie"></div>
```
В этом примере используется `conic-gradient` для создания сектора, и псевдо-элемент `::after` для создания внутренней тени, которая повторяет форму сектора. Благодаря `clip-path: inset(0 round 50%);`, тень будет ограничена круглой областью.
