在剪辑路径上添加边框

Question

我一直试图在剪切路径多边形的一个边缘上添加边框。 我想我需要采取一些解决方法，但找不到方法。有人可以给我一些建议吗？

这是我走了多远：

df$median <- sapply(1:nrow(df4), function(row) {

  subset(df_median$readValue, df_median$setValue == df[row,]$setValue)

})

.container {
  background-color: rgb(225, 204, 162);
  flex-direction: column;
  display: flex;
  font-weight: bold;
  color: white;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.img {
  clip-path: polygon(0px 0px, 97.91% 0.1vw, 102.09% 82.04%, -61px 469px);
}

h2.caption {
  font-size: 40px;
  font-family: 'Crete Round', serif;
  text-align: center;
  font-weight: bold;
  clip-path: polygon(3px 44px, 99.99% -3.60vw, 100% 100%, 0px 127px);
  margin: 0;
}

它应该是什么样子（我想在这条倾斜的白线dd上显示）：

Answer 1

您可以尝试使用以下多种背景颜色，并且比clip-path拥有更好的支持：

.container {
  background:
   linear-gradient(165deg,transparent 60%,#fff 60%,#fff calc(60% + 3px), rgb(225, 204, 162) calc(60% + 4px)),
   url(https://i.imgur.com/74Cam16.png),
   linear-gradient(165deg,transparent 25%, rgb(225, 204, 162) 25.5%);
  background-repeat:no-repeat;
  padding-top:300px;
  width:400px;
  font-weight: bold;
  color: white;
}

h2.caption {
  font-size: 40px;
  font-family: 'Crete Round', serif;
  text-align: center;
  font-weight: bold;
  margin: 0;
}

<div class="container">
  <h2 class="caption">
    Eigene Entwicklung einzigartiges Profil.
  </h2>
</div>