Помогите в решении нестандартного блока на html css

Question

Помогите в решении нестандартного блока на html css

Рейтинг: 5Ответов: 3Опубликовано: 02.08.2023

Кто знает как решить данную задачу? Возможно есть уже какое то готовое решение сохраненное на кодпене или может быть кто то сталкивался с похожей задачей и сможет поделится её решением? Спасибо

css html frontend вёрстка

Источник: Stack Overflow на русском

Answer 1

▲ 9Принят

Такого расположения можно добиться с помощью clip-path. Если вы работаете в программе для разработки интерфейсов, то сохраните фигуру в svg, а потом возьмите её путь и вставьте в clip-path: path():

.body {
  display: flex;
  justify-content: center;
  width: 600px;
}

.block {
  background: #5A80FF;
  width: 95px;
  height: 55px;
  border-radius: 10px;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-figure-1 {
  clip-path: path("M110,0H290a10,10,0,0,1,10,10V130a10,10,0,0,1-10,10H215a15,15,0,0,0-15,15v35a10,10,0,0,1-10,10H10A10,10,0,0,1,0,190V70A10,10,0,0,1,10,60H85a15,15,0,0,0,15-15V10A10,10,0,0,1,110,0Z");
  background: url("https://media.istockphoto.com/id/1288385045/ru/%D1%84%D0%BE%D1%82%D0%BE/%D0%B7%D0%B0%D1%81%D0%BD%D0%B5%D0%B6%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9-%D0%BF%D0%B8%D0%BA-k2.jpg?s=612x612&w=0&k=20&c=MxlQOac2Ud_KNb1lWhpSTyJjHUgVqTK2VZMOQDtozCw=");
  background-size: cover;
  width: 300px;
  height: 200px;
  position: relative;
  right: 95px;
}

.img-figure-2 {
  clip-path: path("M0,190V155a10,10,0,0,1,10-10H85a15,15,0,0,0,15-15V10A10,10,0,0,1,110,0h80a10,10,0,0,1,10,10V190a10,10,0,0,1-10,10H10A10,10,0,0,1,0,190Z");
  background: url("https://moya-planeta.ru/upload/images/xl/85/ec/85ec639804ea05eb0d5bf4e6793c540e5951d508.jpg");
  background-size: cover;
  width: 200px;
  height: 200px;
  position: relative;
  right: 190px;
}

<body class="body">
  <div class="block">Красивые пейзажи</div>
  <div class="img-figure-1"></div>
  <div class="img-figure-2"></div>
</body>

Answer 2

▲ 4

.container {
  width: 400px;
  height: 160px;
  border: 1px solid black;
  position: relative;
  margin: auto;
}

.block1 {
  width: 100px;
  height: 50px;
  background-color: violet;
  border-radius: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
}

.block2 {
  width: 200px;
  height: 140px;
  background-color: darkred;
  border-radius: 10px;
  position: absolute;
  clip-path: polygon(0 45%, 55% 45%, 55% 0, 85% 0%, 100% 0, 100% 15%, 100% 66%, 63% 66%, 63% 100%, 15% 100%, 0 100%, 0% 85%);
  top: 10px;
  left: 10px;
  bottom: 10px;
}

.block3 {
  width: 100px;
  height: 30px;
  background-color: red;
  border-radius: 10px;
  position: absolute;
  top: 10px;
  left: 220px;
  bottom: 10px;
}

.block4 {
  width: 50px;
  height: 140px;
  background-color: gray;
  border-radius: 10px;
  position: absolute;
  top: 10px;
  left: 330px;
  bottom: 10px;
}

.block5 {
  width: 170px;
  height: 100px;
  background-color: green;
  border-radius: 10px;
  position: absolute;
  clip-path: polygon(0 65%, 43% 65%, 43% 0, 85% 0%, 100% 0, 100% 15%, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 0 100%, 0% 85%);
  top: 50px;
  left: 150px;
  bottom: 10px;
}

.block1 p {
  padding: 0;
  margin: 0;
  font-size: 12px;
  text-align: center;
}

.block3 p {
  padding: 0;
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
}

<div class="container">
  <div class="block1">
    <p>lorem ipsum</p>
    <hr>
    <p>lorem ipsum</p>
  </div>
  <div class="block2"></div>
  <div class="block3">
    <p>lorem ipsum</p>
  </div>
  <div class="block4"></div>
  <div class="block5"></div>
</div>

Возможно, не самый идеальный пример, но как вариант, рассмотреть можно.

Answer 3

▲ -5

Объедини красный блок и тот что под ним в один div

div{
display:flex;
flex-direction:column;
align-items:flex-end;
}

B cдвинь его просто в лево - margin-left:-100px;

Помогите в решении нестандартного блока на html css

Ответы