4

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

Пытался использовать различные 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>

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

1 ответ 1

8

.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>

3
  • 2
    Спасибо! Все работает
    – FX_Sektor
    19 фев 2020 в 17:24
  • Все же есть вопрос к автору ответа, а как вы тут определяете что уголок именно с левого нижнего угла? @UModeL
    – FX_Sektor
    19 фев 2020 в 18:58
  • @FX_Sektor: дополнил ответ. Думаю, так понятнее.
    – UModeL
    19 фев 2020 в 23:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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