带 Angular 的 HTML 矩形框

Question

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

这是我目前所拥有的。 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