<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
background-color: #f00;
border-color: #fff #f00 #fff #fff;
border-style: solid;
border-width: 20px;
color: #000;
display: block;
font-size: 12px;
height: 0;
letter-spacing: 1px;
text-align: center;
width: 100px; /*at this size, text wrapps*/
}
</style>
</head>
<body>
<p>Hello, do you like my style?</p>
</body>
</html>
Is there a way to reach a similar result, but with the red triangle expanding if text wraps (or if text is zoomed, which would mean setting it in rel unit).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
position:relative;
float:left;
padding:0 3.2em 0 0;
color: #000;
zoom:expression( runtimeStyle.zoom=1, insertAdjacentHTML('beforeEnd', '<span class="after"></span>') );
}
p:after, .after {
content:" ";
position:absolute;
right:.5em;
top:50%;
margin-top:-1.8em;
border-color: #fff #f00 #fff #fff;
border-style:solid;
border-width: 1.8em;
display: block;
font-size: 12px;
letter-spacing: 1px;
text-align: center;
height:0;
overflow:hidden;
clear:both;
}
.after{margin-top:-1.3em}
.test {
clear:both;
float:none;
width:100px;
}
</style>
</head>
<body>
<p>Hello, do you like my style?</p>
<p class="test">Hello, do you like my style when it runs to two lines?</p>
<p>Hello, do you like my style? Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?</p>
</body>
</html>
It uses an expression for IE6 and 7 but you could just add the extra element instead if you don’t want the script.
What do you mean by other way around? A white arrow over a red <p> background? Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
position:relative;
float:left;
padding:1em 3.2em 1em 0;
color: #000;
background: red;
zoom:expression( runtimeStyle.zoom=1, insertAdjacentHTML('beforeEnd', '<span class="after"></span>') );
}
p:after, .after {
content:" ";
position:absolute;
right:.5em;
top:50%;
margin-top:-1.8em;
border-color: #f00 #fff #f00 #f00;
border-style:solid;
border-width: 1.8em;
display: block;
font-size: 12px;
letter-spacing: 1px;
text-align: center;
height:0;
overflow:hidden;
clear:both;
}
.after{margin-top:-1.3em}
.test {
clear:both;
float:none;
width:100px;
}
</style>
</head>
<body>
<p>Hello, do you like my style?</p>
<p class="test">Hello, do you like my style when it runs to two lines?</p>
<p>Hello, do you like my style? Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?</p>
</body>
</html>
Sorry, I meant: what if the red portion has to extend along with the text AND the triangle extends too. The proportions wouldn’t break. The effect would be pretty much like a zoom.
My first thoughts would be that it would be impossible but then I always ignore them and try to do it:)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
position:relative;
float:left;
padding:1em 4.5em 1em 0;
color: #000;
background: red;
zoom:expression( runtimeStyle.zoom=1, insertAdjacentHTML('beforeEnd', '<span class="after"></span>') );
overflow:hidden;
}
p:after, .after {
content:" ";
position:absolute;
right:-.1em;
top:50%;
margin-top:-6em;
border-color: transparent #fff transparent transparent;
border-style:dashed solid dashed dashed;
border-width:6em;
display: block;
font-size: 12px;
letter-spacing: 1px;
text-align: center;
height:0;
overflow:hidden;
clear:both;
}
.after {
margin-top:-4.5em
}
.test {
clear:both;
float:none;
width:170px;
}
</style>
</head>
<body>
<p>Hello, do you like my style?</p>
<p class="test">Hello, do you like my style when it runs to two lines?</p>
<p class="test">Hello, do you like my style when it runs to two lines or even runs to three lines?</p>
<p>Hello, do you like my style? Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?Hello, do you like my style?</p>
</body>
</html>
That’s about as close as you can get I would think.
It just goes to show that you never know what is possible until you try. I’d already typed a reply saying I don’t think its possible but then I had an idea
(I need to update my site badly but there always seems something else to do. I have a number of examples to add so maybe I’ll set aside some time.)
I was wondering a little something… What if the white triangle, instead of being white, let show a background image? I doubt it can work here, since “transparent” would show the red bg but… well… it’s worth asking.
The white triangle is a border and you can’t show an image on a border. If you want an image anyway then don’t use a border but use an image instead. The techniques would be much the same with an oversized image revealing more as the element stretched.
The red part will be displayed over a background image (from another element). So, I tried to set the border creating the white triangle to “transparent”.
Obviously, I ended up with a red reactangle, and not a transparent triangle.
The arrow part may make some links unclickable if they fall under the transparent section but I guess that’s unlikely as you are no absolutely placing the element so there shouldn’t be content in the way.
