定制形状的块

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操作SVG，但它也会响应CSS更改。

如果你有一个ID为SVG mysvg和path与id元素myborder ，您可以定义边界路径的风格：

#mysvg #myborder {
    stroke: orange;
}

您可以直接操作SVG，或者像正常一样定义样式。 最简单的方法是操作包装器div类。 这是因为操作HTML样式比SVG更容易，并且使用标准JS和JS库更好：

<div id="myshape">
    <svg id="mysvg" height="600" width="400">
        <path id="myborder" d="..." stroke="blue" stroke-width="5">
    </svg>
    <div id="content">Content</div>
</div>

然后你可以拥有这些类：

#myshape #mysvg #myborder {
    stroke: blue;
}

#myshape.hilite #mysvg #myborder {
    stroke: orange;
}

只需修改父类即可更新SVG。 在这种情况下，向父div添加/删除类hilite以更改边框颜色。

示例： http ： //jsfiddle.net/jtbowden/ssrker2h/2/

JS不是更改所必需的，但我使用它来修改类。 这可以通过悬停属性等轻松完成。

仅CSS示例：

 #content { padding: 50px; position: absolute; top: 25px; left: 25px; font-size: 42px; font-family: Arial; font-weight: bold; } #myshape:hover #myborder { stroke: orange; } 

 <div id="myshape"> <svg id="shape" height="600" width="420"> <defs> <pattern id="mybackgnd" patternUnits="userSpaceOnUse" width="400" height="590"> <image xlink:href="http://placekitten.com/g/400/590" x="0" y="0" width="400" height="590" opacity="0.5" /> </pattern> </defs> <path id="myborder" d="M 20 60 l 40 -40 l 320 0 c 10 0 20 10 20 20 l 0 500 c 0 10 -10 20 -20 20 l -340 0 c -10 0 -20 -10 -20 -20 z" stroke="blue" stroke-width="5" fill="url(#mybackgnd)" />Sorry, your browser does not support inline SVG.</svg> <div id="content">Hover Me</div> </div> 

Answer 3

没有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> 

Answer 4

1. 如果你将SVG与CSS链接，我认为用JS来操纵它的风格是不可能的，但是如果你在HTML中包含SVG，你就可以这样做。

2. 使用SVG <path>标签可以制作倾斜的角落，手工制作所需的形状非常复杂，因此我建议您使用矢量图形编辑器工具来创建形状并导出为SVG。 我建议使用CorelDraw或Adobe Illustrator，如果你有其中一个或者是Inkscape，那就是免费的

Answer 5

一个css解决方案：

1. 用圆角绘制div
2. 添加：之前在上角放置边框彩色三角形
3. 添加：之后将略小的背景颜色三角形放在：三角形之前

 #card { height: 400px; width: 200px; border: 3px solid blue; border-radius: 10px; background-color: tan; position: relative; } #card:before { content:""; height:0; width: 0; position: absolute; top:-3px; left:-3px; border-top: 35px solid blue; border-right: 35px solid transparent; } #card:after { content: ""; height: 0; width: 0; position: absolute; top: -3px; left: -3px; border-top: 30px solid white; border-right: 30px solid transparent; } 

 <div id="card"></div> 

对于svg，您可以使用路径绘制框：

 <svg height="155" width="155"> <path style="opacity:0.5;stroke:#000000;stroke-width:5;fill:#ff0000;" d="M42.7,2.5,2.5,42.7,2.5,132c0,11.1,8.92,20,20,20h110c11.1,0,20-8.92,20-20v-110c0-11.1-8.92-20-20-20h-89.8z"/> </svg>