Как сделать расположение блоков справа и слева что бы к before применялись?

Question

[Сергей Васенин]

есть 2 блока с геометрической фигурой которую нужно сделать через before но она уходит за границу содержимого как сделать что бы бефор выровнялся по левому краю

Answer 1

[Ankhena]

Не знаю уже какой это по счету вопрос про эту бело-серую полосу..
Вот без before и прочей ерунды с ее позиционированием https://jsfiddle.net/gp9xngzd/

Answer 2

[game802]

.box {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: #000;
}

.box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  width: 40px;
  background-color: #fff;
}

пример

Comments

[Сергей Васенин]

.button_menu
{
	font-size: 12px;
	padding: 10px;
	display: flex;
}

.button-right
{
	padding-left: 30px;
	display: block;
	width: 130px;
  background-color: grey;
  color: #fff;
  text-align: center;
  position: relative;
}
.button-right::before {
  content: '';
  position: absolute;
  border: 11.5px solid transparent;
  border-right: 11px solid grey;
  border-bottom: 10px solid grey;
  right: 130px;
  top: 0;
}


.button-left
{
	padding-left: 250px;
	display: block;
	width: 150px;
  background-color: grey;
  color: #fff;
  text-align: center;
  position: relative;
}
.button-left::before {
  content: '';
  position: absolute;
  border: 11.5px solid transparent;
  border-right: 11px solid grey;
  border-bottom: 10px solid grey;
  right: 150px;
  top: 0;
}

думаю что ваш пример не поможет

[game802]

Сергей Васенин: так а шо Вы пытаетесь сделать? Можете прислать картинку того, что нужно сделать?

[Сергей Васенин]

HackOwnB:

[Сергей Горячев]

Сергей Васенин: объясняльщик из тебя пипец.

[Сергей Васенин]

Сергей Горячев: ну с этим я ничего не поделаю((

[Сергей Васенин]

Сергей Горячев: ну смотрите я хочу сделать меню посредством css фигуры (уже задумываюсь над svg ) это всё дело завёрнуто в bootstrap выставил по правому краю и левому прописал бефоры но увы левый блок ушёл за пределы содержимого блока col-md-x

[Сергей Горячев]

Сергей Васенин: ладно, наверно я тупой, все равно ничего не понял. Найдутся авторы посообразительнее, которые поймут, где тут меню, бефоры, геометрические фигуры и что куда уехало.

[Сергей Горячев]

хрен с ним, наугад
вместо

.button-right::before {
  content: '';
  position: absolute;
  border: 11.5px solid transparent;
  border-right: 11px solid grey;
  border-bottom: 10px solid grey;
  right: 130px;
  top: 0;
}

написать

.button-right::before {
  content: '';
  position: absolute;
  border: 11.5px solid transparent;
  border-right: 11px solid grey;
  border-bottom: 10px solid grey;
  left: 0;
  top: 0;
}

[Ankhena]

Сергей Васенин: я вам там в ответах написала простой вариант без before и странных заморочек с его позиционированием

[Андрей]

Сергей Горячев: О, а можно и мне сделать блок который круглый квадрат средствами html без бутстрапа и :before и чтобы цвет был черный и высота 14%?
Скриншот не покажу и код тем более, вдруг порчу наведете.

[Сергей Горячев]

Андрей: Я че хошь могу
https://www.youtube.com/watch?v=mhofVKGZIyI