Dec 11 2015 at 13:17

Делаем красивый border для изображения

Invite pending

Создаем три тега внутри одного c любым классом.

<div class="test">
				<div class="test1"></div>
				<div class="test2"></div>
				<div class="test3"></div>
			</div>

Определяем стили для главного контейнера.

.test{
    width: 300px;
    height: 185px;
    border: 10px solid grey;
    float: left;
    position: relative;
    border-radius: 4px;
    background: grey;
}

Определяем стили для внутренних контейнеров, здесь backgroud играет роль цвета границ.

.test1{
    position: absolute;
    top: 25px;
    left: -10px;
    right: -10px;
    width: 320px;
    background: #0B0A0E;
     height: 138px;
}

.test2{
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: 20px;
    background: #211F1F;
    width: 255px;
    height: 205px;
}

Устанавливаем стиль для заднего фона.

.test3{
    border-radius: 3px;
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
    background: url(https://habrastorage.org/files/b69/b2b/d5f/b69b2bd5f3d641b4af5103da322c1179.jpg)center;
}

Вот так у меня получилось:

Tags:

Hubs: