如何将样式边框应用于特定图像

Question

我正在寻找一种样式设置照片边框的CSS代码的样式，以使左边界和底边界成一定角度，而不是垂直和水平。喜欢这张照片：

Answer 1

div.square {
  position: relative;
  height: 100px;
  width: 100px;
  margin: auto;
}

.square:after {
  content: "";
  position: absolute;
  top: 20px;
  right: 50px;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 200px solid gray;
  transform: rotate(45deg);
  z-index: -1;
}

<div class="square">
  <img src="https://via.placeholder.com/100" alt="placeholder">
</div>

Answer 2

您的问题尚不清楚，但是在查看了下面链接的图片后， 使用 svg

SVG有几种绘制路径，框，圆，文本和图形图像的方法。

Example1:

<svg width="100" height="100">

  <circle cx="50" cy="50" r="40"
  stroke="green" stroke-width="4" fill="yellow" />

Circle from w3school

</svg>

EXAMPLE2:

  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

Star from w3school

</svg>