Как сделать острый угол?

Question

[georgich]

Приветствую.
Подскажите, пожалуйста, можно ли сделать средствами css заостренный левый верхний угол? Находил решение через бордеры, но не подошло, ибо там весь блок был залит фоном и за счет этого создавался эффект острого угла.
Спасибо!

Answer 1

[Aksigera]

Треугольник отдельно сверстан дивом + :before, можно сделать, используя в :before свойство transform

.comment {
  position: relative; }
  .comment .block {
    position: relative;
    border: 1px cadetblue solid;
    z-index: 1;
    height: 100px;
    width: 400px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px; }
  .comment .block__triangle {
    top: -12px;
    display: block;
    height: 12px;
    width: 20px;
    z-index: 2;
    border-bottom: white 1px solid;
    border-left: solid 1px cadetblue;
    border-top: 0;
    position: absolute; }
  .comment .block__triangle:after {
    top: -15px;
    content: "";
    display: block;
    border-bottom-left-radius: 150px;
    border-left: solid 1px cadetblue;
    border-bottom: 1px solid cadetblue;
    border-top: transparent;
    height: 12px;
    width: 20px; }

Answer 2

[Карл Майнхофф]

Попробуйте использовать :before. Здесь реализовано именно так, хотя это и не совсем то, что вам нужно.

Answer 3

[profesor08]

Картинкой. В каком виде картика - уже дело вкуса.