如何使用剪辑路径制作圆角三角形

Question

我正在尝试使用具有圆角的剪辑路径创建一个三角形容器。到目前为止，我已经设法获得了三角形，但不确定获得圆角的最佳方法是什么。

到目前为止我有

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 和 1 之间的坐标。该<clipPath>元素还有一个新属性：clipPathUnits="objectBoundingBox"

clipPathUnits="objectBoundingBox" 该值表示<clipPath>元素内的所有坐标都相对于应用剪切路径的元素的边界框。这意味着坐标系的原点是物体边界框的左上角，物体边界框的宽度和高度被认为具有 1 个单位值的长度。

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