Градиентная граница неправильной формы с псевдоэлементом

Можно ли добиться чего-то подобного с помощью CSS? Я имею в виду градиентную границу в сочетании с псевдоэлементом (галочкой) внизу.

На данный момент я сделал только градиент...

.white-grad {
  background: 
    linear-gradient(#ccc 0 0) padding-box, /*this is your grey background*/
    linear-gradient(to right, #9c20aa, #fb3570) border-box;
  color: #313149;
  padding: 10px;
  border: 5px solid transparent;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
}

<div class = "white-grad"> Some text here</div>

<div class = "white-grad"> Some long long long text here</div>

<div class = "white-grad"> Some long long <br>long text here</div>

...к сожалению не знаю как добиться этого на выступающем элементе

html css

30.03.2023 18:22

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

.tooltip {
  --r: 30px; /* border radius*/
  --b: 5px;  /* border length */
  --s: 30px; /* arrow size */
  --c: linear-gradient(60deg,#E84A5F,#355C7D);
  
  max-width: 410px;
  font-size: 20px;
  padding: calc(var(--r) + var(--b));
  position: relative;
  font-weight: bold;
  font-family: sans-serif;
}
.tooltip::before {
  content: "";
  position: absolute;
  inset: calc(-1*var(--s));
  border-radius: calc(var(--r) + var(--s));
  border: var(--s) solid #0000;
  padding: var(--b);
  background: var(--c) border-box;
  -webkit-mask: 
    conic-gradient(from -60deg at calc(80% - var(--b)) calc(100% - var(--b)/1.4), #000 60deg,#0000 0)
     50% calc(100% - var(--b)) /100% var(--s) no-repeat,
    linear-gradient(#000 0 0) content-box,
    conic-gradient(from -60deg at 80% 100%, #000 60deg,#0000 0)
     bottom/100% var(--s) no-repeat,
    linear-gradient(#000 0 0) padding-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #b7e3f1;
}

<p class = "tooltip">
  Sugar plum ice cream icing apple pie cotton candy gummi bears chupa chups cheesecake apple pie. Biscuit macaroon biscuit chocolate cake tiramisu. Wafer cupcake gummi bears tiramisu gingerbread icing lemon drops. Chocolate chocolate bar bonbon cake wafer oat cake. Lemon drops wafer cookie cake tiramisu
</p>

ух ты! это то, что я искал! Дайте мне знать, когда опубликуете статью, спасибо!

— 02.04.2023 14:06

30.03.2023 22:00