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>

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

1 个答案:

更新