Как скруглить углы внутрь блока с обводкой

334

26 ноября 2016, 18:43

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

Answer 1

Версия @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>

Answer 2

Основная идея: вырезать лишние области с помощью псевдоэлементов.
Понадобится всего два блока в разметке (.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.

Answer 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>