Способ обрезать div неправильной формы в css

У меня есть закругленная всплывающая подсказка div переменной высоты, которая содержит прокручиваемый контент. Слева от него находится стрелка, указывающая на элемент, вызвавший его отображение. Стрелка может располагаться в любом месте с левой стороны, а высота контейнера всплывающей подсказки варьируется. В настоящее время у меня есть стрелка, реализованная в виде треугольника css с псевдоэлементами ::before и ::after для фона и границы.

Я пытаюсь расширить прокручиваемое содержимое всплывающей подсказки на фоне стрелки с левой стороны и не знаю, как это сделать. Я просмотрел свойство css clip, но оно работает только с прямоугольниками. -webkit-mask-image кажется интересным, но не может объяснить динамическое размещение стрелки и переменную высоту контейнера всплывающей подсказки. Для меня также важно поддерживать границу и тень вокруг всего.

Я ищу решение, которое, по крайней мере, будет работать в последних версиях Chrome, Safari и Firefox. Я готов вернуться к чему-то другому в других браузерах, которые не поддерживают этот эффект.

Любые идеи о том, как это можно сделать? Я думал об этом какое-то время и действительно был в растерянности.

Ниже показано, как я пытаюсь сделать всплывающую подсказку. Содержимое внутри прокручивается, и эту прокрутку можно увидеть внутри стрелки.

Как я пытаюсь обрезать элемент div.


html css css-shapes
person AlwaysEnthusiast    schedule 03.11.2013    source источник
comment
Я бы использовал изображение, это невозможно сделать в CSS, и я не уверен, что это можно сделать и с помощью JavaScript.   -  person    schedule 04.11.2013
comment
Хорошее описание, но CSS, который вы использовали для элемента, очень поможет нам в его воссоздании. Не хотите добавить?   -  person Zach Saucier    schedule 04.11.2013
comment
Кроме того, как вы хотите обрабатывать изменение ширины контента? Это означает, что весь контент увеличен и сдвинут влево?   -  person Zach Saucier    schedule 04.11.2013
comment
Я также потратил некоторое время на размышления о том, как этого добиться, но не нашел никакого решения, даже без вашей проблемы с прокруткой. Думаю, сегодня это просто технически невозможно.   -  person LeBen    schedule 22.12.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вот вариант, чей успех будет зависеть от некоторого JS:

body {
  background: gray;
}

.test {
  background: white;
  position: absolute;
  top: 2em;
  left: 10em;
  width: 20em;
  &:before {
    content: "";
    position: absolute;
    top: 1em;
    left: -4em;
    border-width: 2em;
    border-style: solid;
    border-color: transparent;
    border-right-color: white;
  }
}

.test-inner {
  position: relative;
  margin-left: -1.5em;
}

.padder {
  float: left;
  clear: both;
  &.m-1 {
    width: 2em;
    height: 1em;
  }
  &.m-2 {
    width: 1.1em;
    height: 1em;
  }
  &.m-3 {
    width: 0.2em;
    height: 1.6em;
  }
  &.m-4 {
    width: 1.1em;
    height: 1em;
  }
  &.m-5 {
    width: 2em;
    height: 3em;
  }

}
<div class="test">
  <div class="test-inner">
    <div class="padder m-1"></div>
    <div class="padder m-2"></div>
    <div class="padder m-3"></div>
    <div class="padder m-4"></div>
    <div class="padder m-5"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate blanditiis ex consectetur suscipit eos ipsa nulla obcaecati provident repellat minima vel reprehenderit dignissimos sed sapiente voluptas nesciunt quo non molestiae.
  </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!</p>

Принцип таков: Вы можете добавить плавающие элементы div (или псевдоэлементы) различной высоты и ширины, чтобы имитировать форму текста (при условии, что текст — это то, что вы хотите расширить в треугольник).

Ручка, которую я сделал, — это всего лишь демонстрация этого принципа, она не предназначена для вашей конкретной ситуации. Если вы собираетесь использовать этот метод формирования текста, похоже, вам придется написать JS, который программно создаст плавающие элементы div и назначит им ширину и высоту в зависимости от того, куда падает стрелка для любого данного пузырька.

person davidtheclark    schedule 02.01.2014