Как сделать закругленный треугольник с помощью траектории клипа

Question

Я пытаюсь создать контейнер в форме треугольника, используя clip-path с закругленными углами. Пока мне удалось получить треугольник, но я не уверен, что лучше всего использовать для получения закругленных углов.

Пока что у меня

HTML

<div class="shadow">
  <div class="triangle"/>
</div>

CSS

.triangle {
   width: 200px;
   height: 200px;
   background: blue;
   clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.shadow {
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, .4));
}

Answer 1

Вместо использования многоугольника в качестве обтравочного контура я использую путь: треугольник с закругленными углами:

.triangle {
  padding: 0;
  background-image: url(https://assets.codepen.io/222579/beagle400.jpg);
  background-size: cover;
  width:100px;
  height: 100px;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}

.shadow {
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, .4));
}

<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip">
           <path d="M100.000,21.000 Q100,0 81.217,9.391L18.783,40.609 Q0,50 18.783,59.391L81.217,90.609 Q100,100 100.000,79.000Z" />
        </clipPath>
    </defs>
</svg>
 
<div class="shadow">
  <div class="triangle"/>
</div>

Чтобы получить треугольник с закругленными углами, я использую эту ручку, которая помогает мне преобразовывать многоугольник в контур с закругленными углами.

ОБНОВЛЕНИЕ

OP комментирует:

знаете ли вы, есть ли способ использовать его из пути, который, если бы ширина была отзывчивой, путь масштабировался бы вместе с ним?

В следующем примере <div class="triangle"/> имеет ширину и высоту 50vw.

Обратите внимание на изменения для обтравочного контура: Атрибут d контура равен используя теперь координаты от 0 до единицы. Также элемент <clipPath> имеет новый атрибут: clipPathUnits="objectBoundingBox"

clipPathUnits = "objectBoundingBox". Это значение указывает, что все координаты внутри элемента <clipPath> относятся к ограничивающей рамке элемента, обтравочный контур применяется к. Это означает, что начало системы координат - это верхний левый угол ограничивающего прямоугольника объекта, а ширина и высота ограничивающего прямоугольника объекта считаются имеющими длину, равную единице.

.triangle {
  padding: 0;
  background-image: url(https://assets.codepen.io/222579/beagle400.jpg);
  background-size: cover;
  width:50vw;
  height: 50vw;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}

.shadow {
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, .4));
}

<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">
           <!--<path d="M100.000,21.000 Q100,0 81.217,9.391L18.783,40.609 Q0,50 18.783,59.391L81.217,90.609 Q100,100 100.000,79.000Z" />-->
           <path d="M1,.21 Q1,0 .81,.09L.187,.4 Q0,.5 .187,.59L.81,.90 Q1,1 1,.79Z" />
        </clipPath>
    </defs>
</svg>
 
<div class="shadow">
  <div class="triangle"/>
</div>