Блог

Главная - Вопросы по программированию - Как мне выровнять фигуры, чтобы кончики были связаны с CSS?

Как мне выровнять фигуры, чтобы кончики были связаны с CSS?

#html #css

#HTML #css

Вопрос:

Я пытаюсь использовать CSS3 для создания фигур и выравнивания их, чтобы они выглядели как на этом изображении:

здесь

Я уже сделал розовый квадрат и 4 серых прямоугольника. Я мог бы сделать div ‘s для всех фигур, а затем настроить поля и повороты, чтобы они выглядели как изображение. Однако это сложно кодировать, и я не думаю, что это хорошая практика в CSS.

 #pinkBlock {
  width: 100px;
  height: 100px;
  background-color: #FFC0CB;
  left: 10px;
  top: 10px;
}

#upRect {
  width: 50px;
  height: 200px;
  background-color: #D3D3D3;
}

#downRect {
  width: 50px;
  height: 200px;
  background-color: #D3D3D3;
}

#leftRect {
  width: 50px;
  height: 200px;
  background-color: #D3D3D3;
}

#rightRect {
  width: 50px;
  height: 200px;
  background-color: #D3D3D3;
}

Прямо сейчас у меня есть 4 серых прямоугольника, уложенных друг на друга, с розовым блоком внизу. Что я могу сделать, чтобы серые прямоугольники касались кончиков друг друга, а розовый блок находился посередине?

Комментарии:

1. Это будет зависеть от того, какую функцию будут выполнять элементы. Им нужно просто сидеть там и быть только визуальными? Нужно ли их слишком масштабировать в зависимости от размера браузера?

Ответ №1:

Простое решение с использованием CSS Grid layout — см. Демонстрацию ниже со встроенными пояснениями:

 .wrapper {
  display: grid;
  grid-template-areas: '. up .'
                       'left pink right'
                       '. bottom .'; /* define the layout */
  grid-template-rows: 50px 200px 50px; /* define the row heights */
  grid-template-columns: 50px 200px 50px; /* define the column widths */
}

#pinkBlock {
  background-color: #FFC0CB;
  grid-area: pink;
  height: 50px;
  width: 50px;
  justify-self: center; /* align horizontally inside grid item */
  align-self: center; /* align vertically inside grid item */
}

#upRect {
  background-color: #D3D3D3;
  grid-area: up; /* place this in the layout */
}

#downRect {
  background-color: #D3D3D3;
  grid-area: bottom; /* place this in the layout */
}

#leftRect {
  background-color: #D3D3D3;
  grid-area: left; /* place this in the layout */
}

#rightRect {
  background-color: #D3D3D3;
  grid-area: right; /* place this in the layout */
} 
 <div class="wrapper">
  <div id="pinkBlock"></div>
  <div id="upRect"></div>
  <div id="leftRect"></div>
  <div id="rightRect"></div>
  <div id="downRect"></div>
</div>

Ответ №2:

Вы можете сделать это только с одним элементом, учитывая несколько фонов:

 .box {
  --d:20px;
  width:200px;
  height:200px;
  background:
    linear-gradient(grey,grey) top   / calc(100% - 2*var(--d)) var(--d),
    linear-gradient(grey,grey) bottom/ calc(100% - 2*var(--d)) var(--d),
    linear-gradient(grey,grey) left  / var(--d) calc(100% - 2*var(--d)),
    linear-gradient(grey,grey) right / var(--d) calc(100% - 2*var(--d)),
    linear-gradient(pink,pink) center/var(--d) var(--d);
 background-repeat:no-repeat;
 display:inline-block;
} 
 <div class="box">

</div>
<div class="box" style="--d:40px;">

</div>