Malleys,
не подскажешь как правильно совместить
Сообщение от Malleys
|
Можно тень сделать вокруг области при помощи функции drop-shadow свойства filter, но я думаю, вдруг вам потребуется залить картинку туда...
Можно ещё сделать так...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
svg {
width: 300px;
height: 120px;
}
</style>
<svg viewBox="-5 -5 310 130">
<style>
path {
stroke: #f06;
stroke-width: 10px;
fill: none;
}
</style>
<path d="M 0 0 L 300 0 L 300 100 L 150 120 L 0 100 z"></path>
</svg>
</body>
</html>
|
с ссылками из <div id="menu2">
<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
body { font: 14px normal Times, serif; position: relative; }
div { border: 1px solid #999; padding: 5px; margin: 5px; }
a { text-decoration: none; }
a:active, a:link { color: #005aff; }
a:visited { color: #5995ff; }
a:hover { color: #7a00ff; }
.act { color: #f0f0f0; text-shadow: 1px 1px #009900, 1px -1px #009900, -1px 1px #009900, -1px -1px #009900, 1px 0px #009900, -1px 0px #009900, 0px 1px #009900, 0px -1px #009900; }
a.efg:active, a.efg:link { color: #167016; }
a.def:active, a.def:link { color: #127a12; }
a.cde:active, a.cde:link { color: #0d850d; }
a.bcd:active, a.bcd:link { color: #068f06; }
a.abc:active, a.abc:link { color: #009900; }
#menu1 { height: 30px; overflow-x: scroll; white-space: nowrap; }
#menu2 { height: 40px; overflow-x: scroll; white-space: nowrap; border: 1px solid transparent; border-top-color: #999; }
#menu1 a { width: 23%; text-align: center; display: inline-block; background: #f0f0f0; border: 1px solid #c0c0c0; border-radius: 8px/5px; margin: 0 0 2px; padding: 5px; }
#menu2 a { width: 18%; height: 29px; text-align: center; display: inline-block; background: #f0f0f0; border: 1px solid #999; border-radius: 8px 8px 0 0 / 5px 5px 0 0; margin: 0 0 2px; padding: 5px; }
#menu3, #menu4, #menu5 { width: 212px; height: 160px; overflow-y: scroll; }
#menu_right { width: 214px; border: none; position: absolute; right: 10px; margin-top: -10px; }
#menu3 a, #menu4 a, #menu5 a, #menu5 .act { width: 200px; display: block; background: #f0f0f0; border: 1px solid #c0c0c0; border-radius: 8px/5px; margin: 0 0 2px; padding: 5px; }
#link_one { }
</style>
<script src="/js/menu_big.js"></script>
</head>
<body>
<div class="menu" id="menu1">
<a href="/razdel_01/">razdel_01</a>
<a href="/razdel_02/">razdel_02</a>
<a href="/razdel_03/">razdel_03</a>
<a href="/razdel_04/">razdel_04</a>
<a href="/razdel_05/">razdel_05</a>
<a href="/razdel_06/">razdel_06</a>
<a href="/razdel_07/">razdel_07</a>
<a href="/razdel_08/">razdel_08</a>
<a href="/razdel_09/">razdel_09</a>
<a href="/razdel_10/">razdel_10</a>
</div>
<div class="menu" id="menu2">
<a href="/razdel_01/podrazdel_01/">podrazdel_01</a>
<a href="/razdel_01/podrazdel_02/">podrazdel_02</a>
<a href="/razdel_01/podrazdel_03/">podrazdel_03</a>
<a href="/razdel_01/podrazdel_04/">podrazdel_04</a>
<a href="/razdel_01/podrazdel_05/">podrazdel_05</a>
<a href="/razdel_01/podrazdel_06/">podrazdel_06</a>
<a href="/razdel_01/podrazdel_07/">podrazdel_07</a>
<a href="/razdel_01/podrazdel_08/">podrazdel_08</a>
<a href="/razdel_01/podrazdel_09/">podrazdel_09</a>
<a href="/razdel_01/podrazdel_10/">podrazdel_10</a>
<a href="/razdel_01/podrazdel_11/">podrazdel_11</a>
<a href="/razdel_01/podrazdel_12/">podrazdel_12</a>
<a href="/razdel_01/podrazdel_13/">podrazdel_13</a>
<a href="/razdel_01/podrazdel_14/">podrazdel_14</a>
<a href="/razdel_01/podrazdel_15/">podrazdel_15</a>
</div>
<div id="menu_right">
<div class="menu" id="menu3">
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/">podpodrazdel_01</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_02/">podpodrazdel_02</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_03/">podpodrazdel_03</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_04/">podpodrazdel_04</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_05/">podpodrazdel_05</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_06/">podpodrazdel_06</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_07/">podpodrazdel_07</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_08/">podpodrazdel_08</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_09/">podpodrazdel_09</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_10/">podpodrazdel_10</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_11/">podpodrazdel_11</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_12/">podpodrazdel_12</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_13/">podpodrazdel_13</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_14/">podpodrazdel_14</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_15/">podpodrazdel_15</a>
</div>
<div class="menu" id="menu4">
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/">podrazdel-a</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-b/">podrazdel-b</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-c/">podrazdel-c</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-d/">podrazdel-d</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-e/">podrazdel-e</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-f/">podrazdel-f</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-g/">podrazdel-g</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-h/">podrazdel-h</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-i/">podrazdel-i</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-j/">podrazdel-j</a>
</div>
<div class="menu" id="menu5">
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/01.html" id="link_one">page-01</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/02.html">page-02</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/03.html">page-03</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/04.html">page-04</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/05.html">page-05</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/06.html">page-06</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/07.html">page-07</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/08.html">page-08</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/09.html">page-09</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/10.html">page-10</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/11.html">page-11</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/12.html">page-12</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/13.html">page-13</a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/14.html">page-14 </a>
<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/15.html">page-15</a>
</div>
</div>
</body>
</html>