0

Trying to achieve a fluid rectangle with angled corners with html/css and sliced images.

Here is what i have so far. 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>

See image belowImage with rectangle angles

1
  • 4
    Frankly, use an image...sometimes it's the best option. At best use the border-image property.
    – Paulie_D
    Apr 22, 2014 at 14:54

1 Answer 1

0

A much cleaner way would be to use border-image to align and size the image around content. You will only have to download a single image instead of one for every facet, and the code is much more readable.

At border-image.com, you can 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

1
  • Thanks Kyle, need to support ie8 also but i think thats where csspie comes in handy. Cheers again. Apr 22, 2014 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.