Инвертированные скругленные углы рамки

Мы все знаем, как создать стандартные закругления углов с помощью свойства CSS границы радиуса , но свойств, которые могут быть использованы для создания инвертированного угла  нет. Так что мы должны создать эти углы с помощью чистого кода [su_tooltip style=”red” shadow=”yes” rounded=”yes” title=”Каскадные таблицы стилей” content=”Каскадные таблицы стилей”]CSS[/su_tooltip].

Есть два способа создания  угла в перевернутом виде:
1. Используя четыре круга и с помощью CSS свойства “position” позиционировать их.
2. Использовать псевдо-классы “:before” и “:after” и свойства позиционирования.

Мы посмотрим на один из вариантов прежде, чем создать наши углы. HTML выглядит следующим образом:

<div class="corners">
  <div class="arc-top-l"></div>
  <div class="arc-top-r"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
  <div class="arc-bottom-l"></div>
  <div class="arc-bottom-r"></div>
</div>

В приведённом выше коде, мы добавили четыре DIV, каждый из них будет располагаться, с помощью CSS в уголках нашего контейнера.

Теперь посмотрим CSS:

.corners {
  background: #eee;
  color: #333;
  position:relative;
  overflow:hidden;
}
.text{
  border: 1px solid #ccc;  
  padding:8px 20px 8px;
}
.arc-bottom-l, .arc-bottom-r, .arc-top-l, .arc-top-r {
  position:absolute;
  background:#fff;
  width:24px;
  height:24px;
  border-radius:50%;
  border: 1px solid #ccc;
}
.arc-bottom-l {
  bottom:-12px;
  left:-12px;
}
.arc-bottom-r {
  bottom:-12px;
  right:-12px;
}
.arc-top-l {
  top:-12px;
  left:-12px;
}
.arc-top-r {
  top:-12px;
  right:-12px;
}

Мы рассмотрели один из способов, теперь поговорим о варианте 2. Здесь мы будем использовать псевдо-классы “:before” и “:after” для создания наших перевернутых углов.

HTML код похож на тот, что описан выше, только с небольшими отличиями.

<div class="corners">
  <div class="arc-top"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
  <div class="arc-bottom"></div>
</div>

Здесь мы видим по одному классу для верхних и нижних углов.
Теперь код CSS:

.corners {
  background: #eee;
  color: #333;
  position:relative;
  overflow:hidden;
}
.text{
  border: 1px solid #ccc;  
  padding:8px 20px 8px;
}
.arc-top, .arc-bottom {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
}
.arc-top:before, .arc-top:after, .arc-bottom:before, .arc-bottom:after {
  content:'';
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%; 
}
.arc-top:before {
  top: -12px;
  left: -12px;
}
.arc-top:after {
  top: -12px;
  right: -12px;
}
.arc-bottom:before {
  bottom: -12px;
  left: -12px;
}
.arc-bottom:after {
 bottom: -12px;
 right: -12px; 
}

 Примеры:

(вверху первый вариант, внизу второй)

Оригинал / Перевод