Зигзагообразный бордюр на CSS

Пример:

HTML:

<div class="zig-zag">Зигзагообразный бордюр на CSS</div>

1	<div class="zig-zag">Зигзагообразный бордюр на CSS</div>

CSS:

.zig-zag {
	margin: 32px 0;
	background: #337AB7;
	text-align: center;
	color: #FFF;
	font-size: 22px;
}	
.zig-zag:before {
	background: linear-gradient(-45deg, #337AB7 16px, red 16px, blue 16px,  transparent 0), linear-gradient(45deg, #337AB7 16px, transparent 0);
	background-position: left top;
	bottom: 22px;		
}
.zig-zag:after {
	background: linear-gradient(-45deg, transparent 16px, #337AB7 0), linear-gradient(45deg, transparent 16px, #337AB7  0);
	background-repeat: repeat-x;
	background-position: left bottom;
	top: 22px;
}
.zig-zag:before,
.zig-zag:after {
	background-repeat: repeat-x;
	background-size: 22px;
	content: "";
	display: block;
	height: 22px;
	left:0;
	width: 100%;
	position: relative;		
}

.zig-zag {

margin: 32px 0;

background: #337AB7;

text-align: center;

color: #FFF;

font-size: 22px;

}

.zig-zag:before {

background: linear-gradient(-45deg, #337AB7 16px, red 16px, blue 16px, transparent 0), linear-gradient(45deg, #337AB7 16px, transparent 0);

background-position: left top;

bottom: 22px;

}

.zig-zag:after {

background: linear-gradient(-45deg, transparent 16px, #337AB7 0), linear-gradient(45deg, transparent 16px, #337AB7 0);

background-repeat: repeat-x;

background-position: left bottom;

top: 22px;

}

.zig-zag:before,

.zig-zag:after {

background-repeat: repeat-x;

background-size: 22px;

content: "";

display: block;

height: 22px;

left:0;

width: 100%;

position: relative;

}

Пример:

HTML:

CSS:

Смотрите также:

Эффект радиоволны на кнопке или блоке

SVG фильтры для создания эффекта дрожания

Длинная тень от блоков

Добавить комментарий:

Разделы:

Проверенный хостинг: