0

Здравствуйте, как сделать, чтобы черный квадратик не обрезался по overflow: hidden и чтобы углы скруглились, спасибо

.block {
  width: 300px;
  height: 300px;
  margin: 100px 100px;
  border-radius: 10px;
  overflow: hidden;
}
.block2 {
  width: 100%;
  height: 150px;
  background: red;
}
.block1 {
  width: 100%;
  height: 150px;
  background: green;
  position: relative;
}
.img {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: -25px;
  background: black;
}
<div class="block">
  <div class="block1">
    <div class="img"></div>
  </div>
  <div class="block2"></div>
</div>

2
  • Вообще вопрос, довольно странный, т.к. свойство oveflow: hidden как раз означает "скрыть все что выходит за пределы". Вы ставите свойство "скрыть все что выходит за пределы" и спрашиваете, как сделать, чтобы " то,что выходит за пределы не было скрыто", самый логичный ответ - убрать это самое overflow: hidden. Вам здесь дали несколько ответов, предлагаю принять один из них, или отредактировать свой вопрос(пояснить можно ли убрать свойство overflow: hidden или нет) 11 фев 2017 в 20:06
  • Проблема в том, что с помощью overflow: hidden; я хотел сделать скругления у .block1, .block2, а так как они выходят за рамки .block, то скруглений без overflow я не увижу, ниже дали ответ...
    – NIkita M.
    13 фев 2017 в 18:56

2 ответа 2

0

Без overflow: hidden

.block {
  width: 300px;
  height: 300px;
  margin: 100px 100px;
}
.block2 {
  width: 100%;
  height: 150px;
  background: red;
  border-radius: 0 0 10px 10px;
}
.block1 {
  width: 100%;
  height: 150px;
  background: green;
  position: relative;
  border-radius: 10px 10px 0 0 ;
}
.img {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: -25px;
  background: black;
  border-radius: 10px;
}
<div class="block">
  <div class="block1">
    <div class="img"></div>
  </div>
  <div class="block2"></div>
</div>

0

Просто добавив к .block свойство padding:

.block {
  width: 300px;
  height: 300px;
  margin: 100px 100px;
  border-radius: 10px;
  overflow: hidden;
  padding: 30px 0 0;
}
.block2 {
  width: 100%;
  height: 150px;
  background: red;
}
.block1 {
  width: 100%;
  height: 150px;
  background: green;
  position: relative;
}
.img {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: -25px;
  background: black;
}
<div class="block">
  <div class="block1">
    <div class="img"></div>
  </div>
  <div class="block2"></div>
</div>

2
  • 1
    Ошибочно, border-radius верхний у .block тогда пропадает 11 фев 2017 в 2:27
  • @AlexandrKazakov тогда уберите просто Hidden. 11 фев 2017 в 9:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.