Фоновые линии

Добавим линии в верстку сайта. Это разбавит однородный фон, а также придаст стройности разным блокам контента.

6 секторов

Разделение фона линиями на 6 секторов.

<div class="lines">
	<div class="deg-000"></div>
	<div class="deg-025"></div>
	<div class="deg-050"></div>
	<div class="deg-075"></div>
	<div class="deg-100"></div>
</div>

/* Линии */

.lines {
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 100%;
    z-index: -1;
}

.lines > * {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #f7f7f7;
}

.lines .deg-000 {left: 0;}
.lines .deg-025 {left: 25%;}
.lines .deg-050 {left: 50%;}
.lines .deg-075 {left: 75%;}
.lines .deg-100 {right: 0;}

@media screen and (max-device-width: 1280px) {
	.lines {left: 5%; right: 5%;}
}

@media screen and (max-device-width: 800px) { 
	.lines {left: 0; right: 0;}
	.lines > *.deg-000, .lines > *.deg-100 {display: none;}
}

@media screen and (max-device-width: 480px) {
	.lines > *.deg-025, .lines > *.deg-075 {display: none;}
}

12 секторов

Тот же самый принцип, только в этом случае возможностей для привязки к линиям становится больше.

<div class="lines">
	<div class="deg-000"></div>
	<div class="deg-010"></div>
	<div class="deg-020"></div>
	<div class="deg-030"></div>
	<div class="deg-040"></div>
	<div class="deg-050"></div>
	<div class="deg-060"></div>
	<div class="deg-070"></div>
	<div class="deg-080"></div>
	<div class="deg-090"></div>	
	<div class="deg-100"></div>	
</div>

.lines {
    position: absolute;
    top: 0;
    left: 8.33%;
    right: 8.33%;
    height: 100%;
    z-index: -1;
}

.lines > * {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #f7f7f7;
}

.lines .deg-000 {left: 0;}
.lines .deg-010 {left: 10%;}
.lines .deg-020 {left: 50%;}
.lines .deg-030 {left: 30%;}
.lines .deg-040 {left: 40%;}
.lines .deg-050 {left: 50%;}
.lines .deg-060 {left: 60%;}
.lines .deg-070 {left: 70%;}
.lines .deg-080 {left: 80%;}
.lines .deg-090 {left: 90%;}
.lines .deg-100 {right: 0;}

Круги

Этот вид линий вряд ли можно использовать для выравнивания, это больше в декоративных целях.

И тут более жесткое требование к привязке и к порядку вывода (z-index).

<div class="rounded">
	<div class="round-50"></div>
	<div class="round-100"></div>
	<div class="round-150"></div>
	<div class="round-200"></div>			
</div>

Стили:

/* Круги */

.rounded {
    width: 100%;
    position: fixed;
	z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    height: 100%;
}

.rounded > * {
    position: absolute;
    border: 1px solid #f7f7f7;
    border-radius: 100%;
}

.rounded .round-5 {height: 5vh; width: 5vh;}
.rounded .round-25 {height: 25vh; width: 25vh;}
.rounded .round-50 {height: 50vh; width: 50vh;}
.rounded .round-75 {height: 75vh; width: 75vh;}
.rounded .round-100 {height: 100vh; width: 100vh;}
.rounded .round-150 {height: 150vh; width: 150vh;}
.rounded .round-200 {height: 200vh; width: 200vh;}

Поделиться в соц. сетях: