在图像周围使用非常特定的形状来设计边框

Styling the border with a very specific shape around an image

对 Web 开发非常陌生,如果我听起来好像不知道自己在做什么,请提前致歉。试图在图像周围设置这种类型的边框,但无法在那个特定的角上做到这一点。有什么想法吗?check the link please cannot embed images into this post

有两个街区。你可以使用这样的东西(红色的图片)

.bg
{
    width: 120px;
    height: 120px;
    border: solid green;
}

.image
{
    position: relative;
    top: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
    background-color: red;
}
<html>
<head>
</head>
<body>
<div class="bg">
<div class="image">

</div>
</div>
</body>
</html>