Делаем CSS3 фоновую сетку под углами +-45deg?

Question

[Максим Валерьевич]

Всем привет. Пытаюсь сделать на CSS3 с помощью repeat-linear-gradient такую кнопку как ниже.

Пока получилась только такая штука, но шаг внутри сетки у нее маленький очень.

.button {
    width: 239px;
    height: 55px;
    border-radius: 50px;
    border: solid 3px #adc21b;
    background: repeating-linear-gradient(45deg, #666, #666 12.5%, transparent 12.5%, transparent 25%, #666 25%, #666 37.5%, transparent 37.5%, transparent 50%), repeating-linear-gradient(-45deg, #666, #666 12.5%, transparent 12.5%, transparent 25%, #666 25%, #666 37.5%, transparent 37.5%, transparent 50%);
    background-size: 20px 20px;
}

Есть ли возможность увеличить шаг сетки как на фото выше? Чтоб линии были тоньше получается.

Answer 1

[Максим Валерьевич]

Получилось что-то вроде такого, даже похоже:

body, .left {
    background: #f9f4ed;
    margin: 0;
    padding: 0;
}
.cbutton {
    margin: 20px;
    width: 242px;
    height: 58px;
}
.butt {
    width: 241px;
    height: 57px;
    border-radius: 50px;
    border: solid 3px #adc21b;
    background: #8a9b0e;
}
.button {
    margin: 0 auto;
    width: 239px;
    height: 55px;
    border-radius: 50px;
    border: solid 1px #6f7e06;
    background: repeating-linear-gradient(45deg, transparent, transparent 47%, #7f8f0d 47%, #7f8f0d 53%, transparent 53%, transparent 100%),
        repeating-linear-gradient(-45deg, transparent, transparent 47%, #7f8f0d 47%, #7f8f0d 53%, transparent 53%, transparent 100%);
    background-size: 20px 20px;
}
.cont {
}
.left {
    text-align: center;
    float: left;
    width: 30px;
    height: 30px;
    border: solid 3px #adc21b;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: 10px;
}
.left i {
    padding-top: 5px;
    color: #f7ca00;
    font-size: 1.7em;
}
.right {
    margin-top: 17px;
    margin-right: 15px;
    float: right;
    color: #f9f061;
    text-shadow: 1px 1px 3px black;
    font-size: 1em;
    font-family: verdana;
}

<div class="cbutton">
        <div class="butt">
            <div class="button">
                <div class="cont">
                    <div class="left"><i class="fa fa-map-marker fa-lg"></i></div>
                    <div class="right">Визовая поддержка</div>
                </div>
            </div>
        </div>
    </div>

Answer 2

[AngReload]

.button {
    width: 239px;
    height: 55px;
    border-radius: 50px;
    border: solid 3px #adc21b;
    background:
	repeating-linear-gradient(
		45deg,
		#666, #666 5%,
		transparent 5%, transparent 50%,
		#666 50%, #666 55%,
		transparent 55%, transparent 100%
	),
	repeating-linear-gradient(
		-45deg,
		#666, #666 5%,
		transparent 5%, transparent 50%,
		#666 50%, #666 55%,
		transparent 55%, transparent 100%
	);
    background-size: 10px 10px;
}

Но, по моему тут можно было сделать проще.

Comments

[Максим Валерьевич]

Например если не секрет?

[AngReload]

Максим Валерьевич: Использованием препроцессоров.