Не фиксированная высота рамок на css

#html #css #html5 #css3 #svg

Имеется резиновый блок у него не задана высота. Как задать ширину верхнему и нижнему
border'у в процентном соотношении?
Сделал такой вот div



.div {
  background: rgba(17, 17, 17, 0.84);
  border-top: 201px solid transparent;
  border-right: 96px solid #ffffff;
  border-bottom: 201px solid transparent;
}
 





Дело в том, что сейчас его высота получается фиксированная из-за высоты рамок и зависит
от рамок, а вообще блок сам при уменьшении экрана будет пропорционально уменьшаться,
но с высотой рамок не получится этого добиться. Как-то можно это исправить? Чтобы рамки
были в процентах от блока.

Может быть можно использовать before и after, вот только как добиться такого же углубления?

И еще, когда я пытаюсь добавить текст, то он встает по середине блока и увеличивает
ему высоту:



.div {
  background: rgba(17, 17, 17, 0.84);
  border-top: 201px solid transparent;
  border-right: 96px solid #ffffff;
  border-bottom: 201px solid transparent;
  color: #fff;
  padding: 10px;
}

  
Привет Привет Привет Привет Привет




    

Ответы

Ответ 1

Если честно svg прекрасно масштабируется и подойдёт для данной задачи. Можно не задавать
явно размеры и использовать свойство viewBox. Вынесите это в отдельный файл. Результат:








Чтобы увеличить или уменьшить "стрелку" поменяйте значение 80 на большее или меньшее
значение.

По умолчанию svg будет пытаться сохранять соотношение сторон, если хотите это отключить
(чтобы изображение растягивалось), то добавьте атрибут preserveAspectRatio="none" для
тэга svg.

Результаты с preserveAspectRatio="none":


Ответ 2

Вариант с clip-path



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.div {
  margin-bottom: 10px;
  padding: 10px 15% 10px 10px;
  color: #fff;
  background: rgba(17, 17, 17, 0.84);
  -webkit-clip-path: polygon(100% 0, 85% 50%, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 85% 50%, 100% 100%, 0 100%, 0 0);
  -webkit-clip-path: url("#clipPath");
  clip-path: url("#clipPath");
}

  Чтобы рамки были в процентах от блока.



  Дело в том, что сейчас его высота получается фиксированная из-за высоты рамок и
зависит от рамок, а вообще блок сам при уменьшении экрана будет пропорционально уменьшаться,
но с высотой рамок не получится этого добиться. Как-то можно это исправить? Чтобы
  рамки были в процентах от блока.




Ответ 3

Я вижу, что здесь подойдут градиенты для абсолютно позиционированных элементов. Результат:



div {
  position: relative;
  background-color: rgba(17, 17, 17, 0.84);
  /* ширина стрелки 50px, смещаемся на такую величину */
  margin-right: 50px;

  /* для вертикального центрирования текста */
  display: flex;
  align-items: center;
  
  /* Стили просто для демонстрации */
  padding: 10px;
  color: #fff;
  font-size: 1.5em;
  height: 200px;
}

/* псевдоэлементы имитруют половинки "стрелки" */
div:before,
div:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  /* ширина стрелки 50px */
  width: 50px;
  height: 50%;
  background: linear-gradient(to left top, transparent 50%, rgba(17, 17, 17, 0.84) 50%);
}

div:after {
  /* Перевернуть и опустить вниз вторую половинку */
  transform: scaleY(-1);
  top: 50%;
}
Здесь будет некоторый текст




Чтобы ширина была нефиксированная, нужно задавать margin-right в процентах от ширины,
которую нужно вычесть, а для псевдоэлементов width в процентах от всей ширины + margin-right.
Демонстрация:



div {
  position: relative;
  background-color: rgba(17, 17, 17, 0.84);
  /* ширина стрелки 50px, смещаемся на такую величину */
  margin-right: 20%;

  /* для вертикального центрирования текста */
  display: flex;
  align-items: center;
  
  /* Стили просто для демонстрации */
  padding: 10px;
  color: #fff;
  font-size: 1.5em;
  height: 200px;
}

/* псевдоэлементы имитруют половинки "стрелки" */
div:before,
div:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  /* ширина стрелки 50px */
  width: 25%;
  height: 50%;
  background: linear-gradient(to left top, transparent 50%, rgba(17, 17, 17, 0.84) 50%);
}

div:after {
  /* Перевернуть и опустить вниз вторую половинку */
  transform: scaleY(-1);
  top: 50%;
}
Здесь будет некоторый текст