Скругленная рамка (скруглы) для блока на CSS

08 июля 2016  593  CSS, скруглы, html

 

Скругленная внутрь рамка придает блоку некую изящность. Автор этих скруглов неизвестен, решение найдено в сети и заточено под нужды сайта салона красоты в блоке с акциями. В основе — абсолютное позиционирование, отрицательные значения, псевдоэлементы (after и before) и свойство border-radius.

Ширину блока, цвет заливки и рамки, глубину и радиус скруглов можно установить по вкусу.

Демо

Стили

.corners {
color: #000;
position: relative;
overflow: hidden;
min-width: 240px; /* по вкусу */
width: 310px; /* по вкусу */
}
.text {
background: #fff;
border: 2px solid #9b9b9b;
padding: 10px 20px 20px 20px;
}
.arc-top,
.arc-bottom {
position: absolute;
width: 100%;
height: 12px;
left: 0;
}
.arc-top { top: 0 }
.arc-bottom { bottom: 0 }
.arc-top:before,
.arc-top:after,
.arc-bottom:before,
.arc-bottom:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
background-color: #fff;
border: 2px solid #9b9b9b;
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;
}

HTML

<div class="corners">
<div class="arc-top"></div>
<div class="text">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a title="#" href="#">Aenean commodo</a> ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="arc-bottom"></div>
</div>

Скачать пример (архив)

 

Комментарии для сайта Cackle
наверх