Making border height relative to parent height
Here is a brain teaser for you. I'm making a banner with little "fly outs" using CSS (note the base line height is 1.5em):
.banner {
background-color:red;
color:white;
padding:1.5em 0;
position:relative;
}
.bannerLeft,
.bannerRight {
border-style:solid;
border-width:2.25em 20px;
height:0;
position:absolute;
width:0;
}
.bannerLeft { top:6px; left:-40px; border-color:red red red white; }
.bannerRight { top:6px; right:-40px; border-color:red white red red; }
The HTML
<div class="banner">Check out this content!<span class="bannerLeft"></span><span class="bannerRight"></span></div>
Makes a sexy little banner with those triangle cut flaps. Trouble is if there is a line break and the height increases then the left and right flaps are the same size. Any ideas how to achieve this without JS? I want to stick with the border solution so I have control of the color (red is foreground and white i开发者_开发知识库s background).
The only other solution I can think of is to use a background color (red) with a background image of a white triangle and a height of 100%. If I set the position correctly it would give the same appearance I think, but would require 2 PNG/GIF images.
Any ideas?
How about this?
http://jsfiddle.net/suu4N/
It addresses the first line wrap (supports up to 2 lines before layout again breaks). At least is a little more flexible. You can adjust the top
css attribute for the bannerContent
div, etc.
CSS:
body
{
padding:40px;
}
.banner {
background-color:red;
color:white;
position:relative;
height:65px;
}
.bannerLeft,
.bannerRight {
border-style:solid;
border-width:2.25em 20px;
position:absolute;
width:0;
}
.bannerLeft {
top:6px; left:-40px;
border-color:red red red white;
}
.bannerRight {
top:6px; right:-40px;
border-color:red white red red;
}
.bannerContent {
position:relative;
top:20%;
text-align:center;
}
Test markup:
<div class="banner">
<span class="bannerLeft" />
<div class="bannerContent">
Check out this content! Here is some really long text.
</div>
<span class="bannerRight" />
</div>
精彩评论