#css #gradient #linear-gradients #css-gradients
#css #градиент #линейные градиенты #css-градиенты
Вопрос:
Как мне изменить градиент красного круга на квадрат?
Это все, что я пытаюсь сделать в коде.
Можно ли это сделать?
https://jsfiddle.net/ub1nyfqj/
.test {
width: 100px;
height: 100px;
background-image: radial-gradient(red 1px, transparent 1px),
radial-gradient(red 1px, transparent 1px),
linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
background-position: 0 0, -5px -5px, 0 0, 0 0;
}
<div class="test"></div>
Ответ №1:
Возможно, это не совсем то, что вы ищете, но я думаю, что конический градиент может быть лучшим решением для вас. Единственная проблема в том, что это не будет полностью соответствовать вашей сетке, но вот как это будет выглядеть при использовании этого метода:
.test {
width: 100px;
height: 100px;
background-image: conic-gradient(red 90deg, transparent 90deg 270deg),
linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
background-position: 0 0, -5px -5px, 0 0, 0 0;
}
<div class="test"></div>
Я чувствую, что вы определенно можете больше возиться с ним, чтобы он соответствовал вашей сетке, если это то, что вам нужно, но, надеюсь, это поможет вам на правильном пути.
Ответ №2:
Кажется, это дает эффект.
https://jsfiddle.net/7zpr9htf/
.test {
width: 100px;
height: 100px;
background-image:
conic-gradient(red 9deg, transparent 0 180deg),
conic-gradient(red 9deg, transparent 0 180deg),
conic-gradient(red 9deg, transparent 0 180deg),
conic-gradient(red 9deg, transparent 0 180deg),
linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
background-position: 44px -11px, 15px -11px, 20px -6px, 9px -6px, -5px -5px, 0 0, 0 0;
}
<div class="test"></div>
Комментарии:
1. Пожалуйста, объясните ответ