带角形角的HTML矩形框

Question

尝试使用带有html / css和切片图像的倾斜角来实现流畅的矩形。

这是我到目前为止所拥有的。 http://jsfiddle.net/M888P/

<div class="main-title-wrapper">
<div class="main-title-inner">
<div class="main-title-top">&nbsp;</div>
<div class="main-title-left">&nbsp;</div>
<div class="main-title-right">&nbsp;</div>
<div class="strapline-container">
<h1 class="page-title">People for the hard places</h1>
<div class="sub-title-wrapper">
<p class="introtext">Together we can use our skills and passion to make a difference by going, giving and praying. Join our network of encouragers to see how you can help bring about God's great mission idea.</p>
</div>
</div>
<div class="main-title-bottom">&nbsp;</div>
<div class="main-title-tl">&nbsp;</div>
<div class="main-title-tr">&nbsp;</div>
<div class="main-title-bl">&nbsp;</div>
<div class="main-title-br">&nbsp;</div>

</div>
</div>

见下面

的图片

Answer 1

更简洁的方法是使用border-image来对齐内容周围的图像并调整其大小。您只需要为每个方面下载单个图像而不是一个图像，并且代码更具可读性。

在border-image.com，您可以generate the proper css：

.banner {
    border-style: solid;
    border-width: 39px 43px 41px 46px;
    -webkit-border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 repeat;
       -moz-border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 repeat;
         -o-border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 repeat;
            border-image: url(http://i.imgur.com/ziNitLf.png) 39 43 41 46 fill repeat;
}

Working Demo in Fiddle