svg片段路径怎么办？反应本机

问题描述

该如何使用svg剪辑路径或更佳的路径？反应本机

解决方法

您不需要svg。您可以使用css来创建该凹口，如下所示：卡片具有:: before元素，具有透明背景和长阴影。您还需要使用边界半径来获得凹口的圆度。

卡片上有overflow: hidden;，因此长阴影不会出现在卡片外，看起来像是背景。

#card {
  width: 300px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

#card::before {
  content: "";
  display: block;
  background: transparent;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  position: relative;
  left: 120px;
  top: -30px;
  box-shadow: 0 0 0 400px salmon;
  z-index: -1;
}



body {
  background: silver;
}

<div id="card"></div>

形状确定后，就可以向卡中添加文本和图像。唯一要记住的是：:: before元素必须移动到卡片内容的下方，并且可以通过添加z-index：-1;

#card {
  width: 300px;
  height: 400px;
  position: relative;
  overflow: hidden;

  background-image: url(http://lorempixel.com/400/200/sports/1/);
  background-repeat: no-repeat;
  background-position: 0 100px;

}

#card::before {
  content: "";
  display: inline-block;
  background: transparent;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  position: relative;
  left: 120px;
  top: -30px;
  box-shadow: 0 0 0 400px salmon;
  z-index: -1;
}

p {
  color: white;
  position: absolute;
  top: 20px;
  right: 20px;
}

body {
  background: silver;
}

<div id="card">  
  <p>Some text</p>
</div>