Задать вопрос
Justique
@Justique

Появляется странный border?

Никак не могу понять откуда берётся этот оранжевый бордер
c5ef69bc112a49e9b290dc2eb887c346.png

Структура
<div class="steps">
	<div id="step0" class="steps_ir active">
		<div class="block-button BlockYouNeed-desktop">
			<div class="wizard-nav-progress">
				<div class="progress">
					<div class="indicator">20%</div>
				</div>
			</div>
		</div>
	</div>
	<div id="step1" class="steps_ir">
		<div class="block-button BlockYouNeed-desktop">
			<div class="wizard-nav-progress">
				<div class="progress">
					<div class="indicator">40%</div>
				</div>
			</div>
		</div>
	</div>
	<div id="step2" class="steps_ir">
		<div class="block-button BlockYouNeed-desktop">
			<div class="wizard-nav-progress">
				<div class="progress">
					<div class="indicator">60%</div>
				</div>
			</div>
		</div>
	</div>
	<div id="step3" class="steps_ir">
		<div class="block-button BlockYouNeed-desktop">
			<div class="wizard-nav-progress">
				<div class="progress">
					<div class="indicator">80%</div>
				</div>
			</div>
		</div>
	</div>
	<div id="step4" class="steps_ir">
		<div class="block-button BlockYouNeed-desktop">
			<div class="wizard-nav-progress">
				<div class="progress">
					<div class="indicator">100%</div>
				</div>
			</div>
		</div>
	</div>
</div>


css
.steps_ir .progress{
	background: linear-gradient(to right, #de8b55 50%, #6e7275 50%);
	background-size: 200% 100%;
    background-position:right bottom;
    transition:all .7s ease;
	border:none;
	border-radius:0px;
	border-right: 2px #43474a solid;
}
.steps_ir.active .progress{
	background-position:left bottom;
	border-right: 2px #43474a solid;
}
.steps_ir .progress .indicator{
	font-size:15px;
	color:#aeaeaf;
	line-height: 20px;
	font-weight:300;
	height: auto;
	transition:all .7s ease;
}
.steps_ir.active .progress .indicator{
	font-weight:400;
	
	color:#fff;
}
  • Вопрос задан
  • 242 просмотра
Подписаться 3 Оценить 6 комментариев
Решения вопроса 1
Lynn
@Lynn
nginx, js, css
Это не border, а ошибки округления.

По моему проще анимировать ширину градиента от 0% до 100% И не будет таких проблем https://codepen.io/alexeyten/pen/MeJdbO
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@semki096
а может это не бордер а нижний фон
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы