3

Интересует верстка блока с закругленными внутрь углами. Важно не просто их скруглить, но и сохранить обводку у блока. введите сюда описание изображения

1
  • Можно еще посмотреть в сторону jquery решения если не хочется возиться с css malsup.com/jquery/corner
    – koks_rs
    26 окт 2016 в 9:02

3 ответа 3

5

Версия @Ruslan_K, но с границами:

#main {
    margin: 40px;
    height: 100px;
    background-color: #1abc9c;
    position: relative;
    overflow: hidden;
}

#main .edge {
    position: absolute;
}

#main .edge.top {
    top: 0;
    left: 10px;
    right: 10px;
    bottom: 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

#main .edge.left {
    left: 0;
    top: 10px;
    bottom: 10px;
    right: 0;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

#main .corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
    border: 1px solid #000;
}

#main .corner.top { top: -10px; }
#main .corner.bottom { bottom: -10px; }
#main .corner.left { left: -10px; }
#main .corner.right { right: -10px; }
<div id="main">
    <div class="edge top"></div>
    <div class="edge left"></div>
    <div class="corner top left"></div>
    <div class="corner top right"></div>
    <div class="corner bottom left"></div>
    <div class="corner bottom right"></div>
</div>

4

Основная идея: вырезать лишние области с помощью псевдоэлементов.
Понадобится всего два блока в разметке (.wrapper и .content):

* {
  box-sizing: border-box;
}

.wrapper {
  background-color: #efefef;
  width: 300px;
  height: 60px;
  margin: 40px;
  /**
   * Ключевые свойства
   * С помощью position: relative будем позиционировать псевдоэлементы для вырезания границ
   * С помощью overflow: hidden будем делать сектора
   */
  position: relative;
  overflow: hidden;
}

/* Для наглядной демонстрации работы, не нужно в проекте */
.wrapper.demo {
  border: 2px solid #bad;
  overflow: visible;
}

.content {
  /* Цвет границы блока должен совпадать с границей будущих вырезанных секторов */
  border: 2px solid #07c;
  width: 100%;
  height: 100%;
}

.wrapper::before,
.wrapper::after,
.content::before,
.content::after {
  /* Цвет следует подобрать в цвет фона сайта для перекрытия части основного блока */
  background-color: #fff;
  /* Цвет границы блока должен совпадать с границей основного блока */
  border: 2px solid #07c;
  /* Делаем окружность */
  border-radius: 50%;
  content: '';
  /* Позиционируется относительно .wrapper. Это важно для понимания. */
  position: absolute;
  width: 30px;
  height: 30px;
}

/* Позиционирование будущих секторов: верхний ряд */
.wrapper::before,
.wrapper::after {
  top: -15px;
}

.wrapper::before {
  left: -15px;
}

.wrapper::after {
  right: -15px;
}

/* Позиционирование будущих секторов: нижний ряд */
.content::before,
.content::after {
  bottom: -15px;
}

.content::before {
  left: -15px;
}

.content::after {
  right: -15px;
}
<div class="wrapper">
  <div class="content"></div>
</div>

<div class="wrapper demo">
  <div class="content"></div>
</div>

Блок с классом .demo добавлен только для понимания того, как это все работает.


Если необходимо сделать поддержку двойного фона у сектора, этого можно добиться, залив псевдоэлементы линейным градиентом.

Сгенерировать градиент можно с помощью online-сервиса Ultimate CSS Gradient Generator.

3

#main {
    margin: 40px;
    height: 100px;
    background-color: #1abc9c;
    position: relative;
    overflow: hidden;
}

#main div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }
<div id="main">
    <div class="top left"></div>
    <div class="top right"></div>
    <div class="bottom left"></div>
    <div class="bottom right"></div>
</div>

Ваш ответ

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

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