Как устранить проблему?

Question

[Lex_pvl]

Из-за transform у .hint не срабатывает "треугольник", подскажите как расположить hint по центру относительно label без transforma либо что-то по треугольнику.

<label class="color-label color-white">
	<input type="radio" name="color">
	<span class="custom"></span>
	<span class="hint">
		Белый
	</span>
</label>

.color-label {
	display: block;
	cursor: pointer;
	position: relative;
	&:not(:last-child) {
		margin-right: 6px;
	}
	&:hover {
		.hint {
			display: block;
		} 
	}
	input {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.custom {
		display: inline-block;
		border-radius: 2px;
		width: 27px;
		height: 27px;
	}

	.hint {
		display: none;
		position: absolute;
		bottom: calc(100% + 20px);
		left: 50%;
		transform: translateX(-50%);
		padding: 8px 16px;
		background: @white;
		border-radius: 6px;
		.reg();
		font-size: 18px;
		line-height: 132%;
		color: @black;
		box-shadow: 0px 8px 18px rgba(98, 104, 127, 0.12), 0px 1px 2px rgba(52, 54, 73, 0.16);
		&::after, &::before {
			content: '';
			position: absolute;
			bottom: -10px;
			left: 50%;
			width: 18px;
			height: 18px;
			transform: translateX(-50%) rotate(45deg);
			transform-origin: center;
			box-shadow: 0px 8px 18px rgba(98, 104, 127, 0.12), 0px 1px 2px rgba(52, 54, 73, 0.16);
			z-index: -1;
			background: @white;
		}
		&::before {
			z-index: 1;
			box-shadow: none;
		}
	}
}

Answer 1

[Максим]

Вместо трансформа можно задать отрицательный margin-left, равный половине ширины хинта.

Comments

[Lex_pvl]

Хинт всегда разной ширины

[Максим]

Тогда трансформ. А чем он мешает то?

[Lex_pvl]

Максим,
Когда нет трансформа у хинта, треугольник выглядит как надо

[Максим]

А когда есть?

[Lex_pvl]

Максим, Картинка не загрузилась?

[Максим]

И в чем проблема? почему трансформ нельзя, если он работает?

[Lex_pvl]

Максим, У вас картинка не грузит или что?

[Максим]

Грузит. Но я не понимаю сути. Что нужно. Почему без трансформ?

[Максим]

Картинки причем разные прислали

[Максим]

https://codepen.io/MaxGraph/pen/ExPqaoQ - что-то такое вам надо?

[Lex_pvl]

Максим, Ну так для сравнения и прислал, на первой смотрите на треугольник, без трансформа у хинта, на второй с трансформом

[Максим]

Lex_pvl, я вижу, что на второй все ровно с трансформом. так почему в вопросе вы указываете, что нужно без него?

[Lex_pvl]

Максим, С бордером не подходит, нужна тень

[Максим]

Lex_pvl, Обновите пен еще раз. Тень добавил, но не знаю, как вам нужно

[Lex_pvl]

Максим, Вы не понимаете, что из за трансформа треуголник не срабатывает?

[Максим]

Lex_pvl, На втором скриншоте я вижу, что все идеально. Вы утверждаете, что этот скрин с трансформом. Так что да, я не понимаю, что у вас там не работает с ним :)

[Lex_pvl]

Максим, Что странно, заменив box-shadow на filter drop-shadow все заработало.

[Максим]

Lex_pvl, просто drop-shadow как раз для того и нужен - чтобы задавать объектам тень по контуру)