<!doctype html>
<title>Задание 3</title>
<div class="block">
<h2 class="block-title">Заголовок</h2>
<div class="block-content">
Содержимое
</div>
</div>
<style type="text/css">
body {
background: url([url]http://htmlbook.ru/example/images/redline.png);[/url]
}
.block {
border: 2px solid #004c3b;
padding: 7px;
border-radius: 5px;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(0, 204, 160, .6)),
color-stop(1, rgba(8, 166, 132, .8))
);
background: -o-linear-gradient(
rgba(0, 204, 160, .6),
rgba(8, 166, 132, .8)
);
background: -moz-linear-gradient(
center top,
rgba(0, 204, 160, .6) 0%,
rgba(8, 166, 132, .8) 100%
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9900cca0', EndColorStr='#CC08a684')";
}
.block-title {
border: solid #666;
border-width: 1px 1px 0 1px;
border-radius: 5px 5px 0 0;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #ffd800),
color-stop(1, #ffba00)
);
background: -o-linear-gradient(#ffd800,#ffba00);
background: -moz-linear-gradient(
center top,
#ffd800 0%,
#ffba00 100%
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffd800', EndColorStr='#ffffba00')";
padding: 7px;
position: relative;
font: 16px Arial, Helvetica, sans-serif;
}
.block-title::after {
position: absolute;
top: 100%;
left: 5px;
content: "";
background: red;
border-top: 10px solid #ffba00;
border-left: 10px solid #edecde;
border-right: 10px solid #edecde;
}
.block-content {
background: #edecde;
border-radius: 0 0 5px 5px;
padding: 12px 5px 12px 10px;
border: solid #666;
border-width: 0 1px 1px 1px;
font: 13px Arial, Helvetica, sans-serif;
min-height: 45px;
}
</body>
</html>
http://jsfiddle.net/smmurf/NwQfB/12/ вот такое
В мозилле не вплотную, а стрелка не во втором блоке а выше, что нужно сделать.
У кого мозилла проверьте
