如何将样式边框应用于特定图像[关闭]答案

【问题标题】：How to apply a style border to a specific image [closed]如何将样式边框应用于特定图像[关闭]
【发布时间】：2020-10-31 22:00:24
【问题描述】：

我正在寻找一种方法来设置照片周围边框的 CSS 代码样式，以便左边框和下边框是有角度的，而不是垂直和水平的。喜欢这张照片：

【问题讨论】：

您的问题不清楚，请阅读how to ask a good question...您要变换形状还是只变换边框？最终目标是什么？你已经尝试了什么？

标签： css sass

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：