Question

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

enter image description here

如您所见，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>

这说明了这一点：

enter image description here

我的问题是：我们可以在这个svg中倾斜一个角落，然后将内容放入其中吗？也许通过将这个svg作为元素的背景来提供。

Answer 1

我尝试在css中重新创建形状。正如你所说，它有些不满意和繁琐，但无论如何我都会分享它。

这只适用于现代浏览器。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用JavaScript操作SVG，但它也会响应CSS更改。

如果您的标识为mysvg的SVG和标识为path的{{1}}元素，则可以为边框路径定义样式：

myborder

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

div

然后你可以拥有这些课程：

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

只需修改父类即可更新SVG。在这种情况下，向父#myshape #mysvg #myborder { stroke: blue; } #myshape.hilite #mysvg #myborder { stroke: orange; }添加/删除课程hilite以更改边框颜色。

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

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

仅限CSS示例：

div

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

Answer 3

仅限javascript html / CSS enter image description here

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

我已对此进行了测试以及以下工作：

.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

如果您将SVG与CSS链接起来，我认为用JS来操纵它的风格是不可能的，但是如果你在HTML中包含SVG，你就可以这样做。 / p>
可以使用SVG <path> tag制作倾斜的角落，手工制作所需的形状真的很复杂，所以我建议您使用{{3} }，创建形状并导出为SVG。我推荐CorelDraw或Adobe Illustrator，如果您有其中一个或Inkscape，那是免费的

Answer 5

css解决方案：

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

定制形状的块

5 个答案: