7

Имеется резиновый блок у него не задана высота. Как задать ширину верхнему и нижнему 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;
}
<div class="div"> 
</div>

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

Может быть можно использовать 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;
}
<div class="div">
  <h1>Привет Привет Привет Привет Привет</h1>
</div>

0

3 ответа 3

8

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30">
  <polygon points="0 0, 100 0, 80 15, 100 30, 0 30" fill="#111" fill-opacity="0.84"></polygon>
</svg>

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

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

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

введите сюда описание изображения

9
  • Не пойму, как его в div засунуть и как текст туда засунуть?
    – Дима
    27 июл 2017 в 14:40
  • @Дима Сохранить весь текст <svg xmlns…</svg> как отдельный файл svg (допустим 1.svg), затем использовать его как картинку (к примеру, div { background-image: url("1.svg"); }). Это понятно или надо ещё что пояснить? А текст и любое другое содержимое уже просто как обычный HTML. 27 июл 2017 в 14:46
  • А все понял, спасибо) И во всех браузерах будет отлично работать?
    – Дима
    27 июл 2017 в 14:54
  • @Дима Ну у меня даже в IE работает. 27 июл 2017 в 14:55
  • 2
    @Дима Да просто немного поиграйтесь с координатами, это несложно. viewBox="0 0 100 30" это значит, что у нас есть координаты от 0 до 100 по оси X, и от 0 до 30 по оси Y. Задаётся многоугольник (polygon) с 5ю вершинами (свойство points: 1)0 0, 2) 100 0, 3) 80 15, 4) 100 30, 5) 0 30). Нарисуйте это на бумаге, чтобы увидеть и понять, затем попробуйте продумать для мобильной версии другой svg на основе этого. Надо просто этот немного модифицировать. Надеюсь это вам поможет. Но если совсем всё плохо и совсем ничего не получилось, то задайте ещё один вопрос здесь. 27 июл 2017 в 17:09
6

Вариант с 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");
}
<div class="div">
  Чтобы рамки были в процентах от блока.
</div>

<div class="div">
  Дело в том, что сейчас его высота получается фиксированная из-за высоты рамок и зависит от рамок, а вообще блок сам при уменьшении экрана будет пропорционально уменьшаться, но с высотой рамок не получится этого добиться. Как-то можно это исправить? Чтобы
  рамки были в процентах от блока.
</div>
<svg width="0" height="0">
    <defs>
        <clipPath id="clipPath" clipPathUnits="objectBoundingBox">
            <polygon points="1 0, 0.85 0.5, 1 1, 0 1, 0 0" />
        </clipPath>
    </defs>
</svg>

5
  • Вот это мощь) Спасибо большое, не знал о таком свойстве. А, как для браузеров в наше время? Для старых точно не будет работать скорее всего.
    – Дима
    27 июл 2017 в 13:22
  • у ie нет поддержки данного свойства
    – soledar10
    27 июл 2017 в 13:24
  • 2
  • в Сhrome 60.0.3112.78, FF54, Opera 46.0.2597.5, Safari - работает
    – soledar10
    27 июл 2017 в 13:57
  • А зачем Вы добавили svg? Все же и так работало.
    – Дима
    27 июл 2017 в 15:06
4

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

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%;
}
<div>Здесь будет некоторый текст</div>

Чтобы ширина была нефиксированная, нужно задавать 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%;
}
<div>Здесь будет некоторый текст</div>

2
  • Какой вариант по Вашему мнению лучше мне выбрать из всех предложенных?
    – Дима
    27 июл 2017 в 14:22
  • @Дима Если не надо поддерживать IE\Edge, то и clip-path можно выбрать. Но если для всех браузеров нужен результат, то однозначно SVG (тем более вариант очень простой, коротенький и тоже легко модифицируется, чтобы увеличить или уменьшить стрелку поменяйте значение 80 на большее или меньшее). Градиенты иногда не особо сглаживаются, поэтому это вариант отметаем. 27 июл 2017 в 14:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.