定制形状的块

Question

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

如您所见,3个角是圆形的,1个角是倾斜的.边界将需要在块的不同状态期间改变.此元素下方还会有一个照片背景.

所有针对此的CSS和JS解决方案都是丑陋而繁琐的.

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

这个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中倾斜一个角落,然后将内容放入其中吗？也许通过喂这个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>

Answer 2

没有 javascript 仅有 html/CSS

要制作您想要的形状，您需要使用多边形而不是矩形：

我已经测试过这个和以下作品：

.foo {
      position:relative;
      top:25px;    
      left:215px;
      float:left;
    }

    <hr>Just to prove adding content moves move svg an its content down<hr><hr>
    <div class="foo">my text and stuff <br><img src="http://blog.spoongraphics.co.uk/wp-content/uploads/2014/low-poly/tiger-poly-lg.jpg" height="100px"></div>
    <svg width="400" height="400">
      <polygon points="50 250,400 250,400 7,108 4,53 62" style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
    </polygon>
    Sorry, your browser does not support inline SVG.
    </svg>