Как нарисовать треугольный указатель на углу блока

Question

Пытался использовать различные HTML генераторы для отрисовки ломаных полигонов. Но все равно не выходит как хотелось бы. Я так понимаю тут должен быть еще один блок прижатый с лева или наоборот с низу и он имеет ломаный угол?

Наше простое решение на сайте htmlbook.ru но мне надо имее

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Треугольник</title>
  <style>
   .block {
    border: 1px solid green;
    border-radius: 10px;
    padding: 20px;
    position: relative;
   }
   .block::before, .block::after {
    content: ''; 
    position: absolute;
    left: 5px; bottom: -20px;
    border: 10px solid transparent;
    border-top: 10px solid green;
   }
   .block::after {
    border-top: 10px solid white;
    bottom: -19px; 
   }
  </style>
 </head>
 <body>
  <div class="block">
   Глокая куздра штеко будланула бокра и кудрячит бокрёнка.
  </div>
 </body>

но на углу указатель а не снизу. Как можно сместить его на угол?

Answer 1

.block {
  position: relative;
  border: 2px solid #c8c8c8;
  border-radius: 5px;
  padding: 20px;
  background: #eee;
}
.block::after {
  content: '';
  position: absolute;
  height: 20px; width: 20px;
  border: 2px solid #c8c8c8;
  border-radius: 20px 0px 5px 0px;
  border-color: transparent #c8c8c8 #c8c8c8 transparent;
  background: linear-gradient(135deg, transparent 48%, #eee 49%);
  /* Снизу слева */
    bottom: -6px; left: -6px; transform: rotate(90deg) skew(20deg, 20deg);
  /* Снизу справа
    bottom: -6px; right: -6px; transform: rotate(0deg) skew(20deg, 20deg); */
  /* Сверху справа
    top: -6px; right: -6px; transform: rotate(270deg) skew(20deg, 20deg); */
  /* Сверху слева
    top: -6px; left: -6px; transform: rotate(180deg) skew(20deg, 20deg); */
  /* Сверху
    top: -12px; left: 50%;
    transform: translate(-50%, 0%) rotate(225deg) skew(20deg, 20deg); */
  /* Снизу
    bottom: -12px; left: 50%;
    transform: translate(-50%, 0%) rotate(45deg) skew(20deg, 20deg); */
  /* Слева
    bottom: 50%; left: -12px;
    transform: translate(0%, 50%) rotate(135deg) skew(20deg, 20deg); */
  /* Справа
    bottom: 50%; right: -12px;
    transform: translate(0%, 50%) rotate(315deg) skew(20deg, 20deg); */
}

<div class="block">
  Глокая куздра штеко будланула бокра и кудрячит бокрёнка.
</div>

БЛОГ НА HUSL

Как нарисовать треугольный указатель на углу блока

Ответы (1 шт):