javascript - 自定义形状 block

Question

我需要为网页创建这样的元素:

如您所见，3 个 Angular 是圆的，1 个 Angular 是斜的。 边界将需要在 block 的不同状态期间改变。 此元素下方还会有照片背景。

为此，所有的 CSS 和 JS 解决方案都很丑陋和麻烦。

我的想法是:我们可以使用 svg 元素绘制这个形状，然后能够根据需要使用 js 操作边框颜色吗？

有一个带圆 Angular 的 svg 元素:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
  Sorry, your browser does not support inline SVG.
</svg>

画这个:

我的问题是:我们能否使这个 svg 中的一个 Angular 倾斜，然后在其中放置内容？也许通过将这个 svg 作为元素的背景提供。

Answer 1

我尝试在 CSS 中重新创建形状。正如您所说，它有点令人不满意且繁琐，但我还是会分享它。

不过这只适用于现代浏览器。

.box{
    border:5px solid orange;
    background-color:#eee;
    width:100px;
    height:100px;
    padding:30px;
    border-radius:20px;
    position:relative;
}
.box::after{
    content:'';
    position:absolute;
    top: -23px;
    left: -25px;
    width:40px;
    height:40px;
    border-right:5px solid orange;
    background:#fff;
    transform:rotate(45deg);
}

<div class="box">Content</div>