Question

我有一个大胆的项目，并希望得到一些建议。我想拥有一个使用CSS Diamonds的网站，我附上了一张图片，以便更好地了解我正在做的事情。以下是我到目前为止遇到的问题：

三角形完美对齐，直到添加一个子菜单，然后右三个向右移动（这是在一个点上工作）。子菜单所在的li也失去了它的钻石
子菜单上的文字没有居中。
我不能拥有背景图片，然后钻石然后标题。我尝试过不同的z-index，但它没有用。（要查看菜单标题，需要删除背景图像，并且钻石必须为-1 z-indexed）
因为我需要使用跨度来创建侧边栏的三角形文本包装，所以我不能只让侧边栏成为菱形，所以我仍然需要在它下方添加钻石。
将正确的文本正文和侧边栏文本正文包裹在钻石中会很棒，但是我认为这是不可能的，因此我还原到了侧边栏包装。

到目前为止，这是我的HTML：我已经注释掉子菜单和侧边栏钻石尝试。 http://jsfiddle.net/s4XXE/

site design triangle

 /* reset.css */
 html {
   margin: 0;
   padding: 0;
   border: 0;
 }
 body,
 div,
 span,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 code,
 del,
 dfn,
 em,
 img,
 q,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 dialog,
 figure,
 footer,
 header,
 hgroup,
 nav,
 section {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
 }
 article,
 aside,
 details,
 figcaption,
 figure,
 dialog,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
   display: block;
 }
 body {
   line-height: 1.5;
   background: white;
 }
 table {
   border-collapse: separate;
   border-spacing: 0;
 }
 caption,
 th,
 td {
   text-align: left;
   font-weight: normal;
   float: none !important;
 }
 table,
 th,
 td {
   vertical-align: middle;
 }
 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
   content: '';
 }
 blockquote,
 q {
   quotes: """";
 }
 a img {
   border: none;
 }
 :focus {
   outline: 0;
 }
 /* typography.css */
 html {
   font-size: 100.01%;
 }
 body {
   font-size: 75%;
   color: #222;
   background: #fff;
   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-weight: normal;
   color: #d10000;
 }
 h1 {
   font-size: 3em;
   line-height: 1;
   margin-bottom: 0.5em;
 }
 h2 {
   font-size: 2em;
   margin-bottom: 0.75em;
 }
 h3 {
   font-size: 1.5em;
   line-height: 1;
   margin-bottom: 1em;
 }
 h4 {
   font-size: 1.2em;
   line-height: 1.25;
   margin-bottom: 1.25em;
 }
 h5 {
   font-size: 1em;
   font-weight: bold;
   margin-bottom: 1.5em;
 }
 h6 {
   font-size: 1em;
   font-weight: bold;
 }
 h1 img,
 h2 img,
 h3 img,
 h4 img,
 h5 img,
 h6 img {
   margin: 0;
 }
 p {
   margin: 0 0 1.5em;
 }
 .left {
   float: left !important;
 }
 p .left {
   margin: 1.5em 1.5em 1.5em 0;
   padding: 0;
 }
 .right {
   float: right !important;
 }
 p .right {
   margin: 1.5em 0 1.5em 1.5em;
   padding: 0;
 }
 a:focus,
 a:hover {
   color: #09f;
 }
 a {
   color: #06c;
   text-decoration: underline;
 }
 blockquote {
   margin: 1.5em;
   color: #666;
   font-style: italic;
 }
 strong,
 dfn {
   font-weight: bold;
 }
 em,
 dfn {
   font-style: italic;
 }
 sup,
 sub {
   line-height: 0;
 }
 abbr,
 acronym {
   border-bottom: 1px dotted #666;
 }
 address {
   margin: 0 0 1.5em;
   font-style: italic;
 }
 del {
   color: #666;
 }
 pre {
   margin: 1.5em 0;
   white-space: pre;
 }
 pre,
 code,
 tt {
   font: 1em'andale mono', 'lucida console', monospace;
   line-height: 1.5;
 }
 li ul,
 li ol {
   margin: 0;
 }
 ul,
 ol {
   margin: 0 1.5em 1.5em 0;
   padding-left: 1.5em;
 }
 ul {
   list-style-type: disc;
 }
 ol {
   list-style-type: decimal;
 }
 dl {
   margin: 0 0 1.5em 0;
 }
 dl dt {
   font-weight: bold;
 }
 dd {
   margin-left: 1.5em;
 }
 table {
   margin-bottom: 1.4em;
   width: 100%;
 }
 th {
   font-weight: bold;
 }
 thead th {
   background: #c3d9ff;
 }
 th,
 td,
 caption {
   padding: 4px 10px 4px 5px;
 }
 tbody tr:nth-child(even) td,
 tbody tr.even td {
   background: #e5ecf9;
 }
 tfoot {
   font-style: italic;
 }
 caption {
   background: #eee;
 }
 .small {
   font-size: .8em;
   margin-bottom: 1.875em;
   line-height: 1.875em;
 }
 .large {
   font-size: 1.2em;
   line-height: 2.5em;
   margin-bottom: 1.25em;
 }
 .hide {
   display: none;
 }
 .quiet {
   color: #666;
 }
 .loud {
   color: #000;
 }
 .highlight {
   background: #ff0;
 }
 .added {
   background: #060;
   color: #fff;
 }
 .removed {
   background: #900;
   color: #fff;
 }
 .first {
   margin-left: 0;
   padding-left: 0;
 }
 .last {
   margin-right: 0;
   padding-right: 0;
 }
 .top {
   margin-top: 0;
   padding-top: 0;
 }
 .bottom {
   margin-bottom: 0;
   padding-bottom: 0;
 }
 /* Customization */
 body {
   background: #efefef;
   margin: 0px auto;
   width: 1320px;
 }
 #bodydiv {
   width: 100%;
   background-image: url('http://i.stack.imgur.com/QVfwy.png');
   background-repeat: repeat;
   overflow: hidden;
 }
 ul {
   list-style: none;
   position: relative;
   width: 100%;
   text-align: center;
   padding: 0px 0px 0px 28.6em;
   margin-bottom: 0px;
   display: block;
 }
 li {
   float: left;
   margin: 0em -1.45em;
   font-weight: bold;
   font-size: 2em;
 }
 ul li a {
   color: red;
   text-decoration: none;
 }
 ul li a:hover {
   color: #eee;
   text-decoration: none;
 }
 .triangle:after {
   content: '';
   position: relative;
   top: 105px;
   margin-left: -50%;
   border: 5em solid transparent;
   border-top-color: red;
   z-index: 1;
 }
 li:nth-child(1).triangle:after {
   border-top-color: blue;
 }
 li:nth-child(2).triangle:after {
   border-top-color: green;
 }
 li:nth-child(3).triangle:after {
   border-top-color: purple;
 }
 ul li ul {
   font-size: .5em;
 }
 ul li ul a {
   z-index: 1;
 }
 .diamond,
 .diamond:after {
   width: 0;
   height: 0;
   border: 4em solid transparent;
   content: '';
   z-index: 1;
 }
 .diamond {
   border-bottom-color: red;
   position: absolute;
   top: -1em;
 }
 .diamond:after {
   position: absolute;
   margin-left: -4em;
   top: 4em;
   border-top-color: red;
 }
 .diamond.big,
 .diamond.big:after {
   width: 0;
   height: 0;
   border: 9em solid transparent;
   content: '';
   z-index: 1;
 }
 .diamond.big {
   border-bottom-color: red;
   position: absolute;
 }
 .diamond.big:after {
   margin-left: -9em;
   top: 9em;
   border-top-color: red;
 }
 .diamond.huge,
 .diamond.huge:after {
   width: 0;
   height: 0;
   border: 500px solid transparent;
   content: '';
   z-index: 1;
 }
 .diamond.huge {
   top: -500px;
   border-bottom-color: red;
   position: absolute;
 }
 .diamond.huge:after {
   margin-left: -500px;
   top: 500px;
   border-top-color: red;
 }
 li:hover > ul li {
   display: none;
 }
 ul ul li {
   font-size: 1em;
   display: block;
   position: relative;
   left: 1em;
   margin-left: 1em;
   margin-top: 1em;
 }
 ul ul li:nth-child(1).diamond {
   border-bottom-color: orange;
   top: 4em;
   left: 6em;
 }
 ul ul li:nth-child(1).diamond:after {
   border-top-color: orange;
 }
 ul ul li:nth-child(2).diamond {
   border-bottom-color: aqua;
 }
 ul ul li:nth-child(2).diamond:after {
   border-top-color: aqua;
 }
 */

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Triangles</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta name="viewport" content="width=479;">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>



<body>
  <div id="bodydiv">
    <ul>
      <li class="current index triangle submenu"><a href="#">Home</a>
        <!--
    
<ul><li class="diamond"><a href="#" title="Sub Page 1">subpage 1</a></li><li class="diamond"><a href="#" title="Sub Page 2">subpage 2</a></li></ul>
    
-->
      </li>
      <li class="about triangle"><a href="#">Home</a>
      </li>
      <li class="contact triangle"><a href="#">Home</a>
      </li>
      <li class="other triangle"><a href="#">Home</a>
      </li>

    </ul>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h1>
Heading for the page
</h1>
    <div style="width:60%; float:left;">
      <p style="font-size:1em; color:black;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at tellus ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc et erat magna. Aenean volutpat ultrices quam nec vestibulum. Nullam
        quis ante vel tellus mattis laoreet. Duis vehicula est id lorem consequat pretium. Suspendisse potenti.
      </p>
      <p style="font-size:1em; color:black;">
        Donec ut nunc ante, vel elementum ante. Vivamus mattis ornare fermentum. Quisque vitae justo quam. Cras nunc odio, sodales a condimentum id, laoreet sed neque. Integer adipiscing placerat sollicitudin. Etiam posuere, lacus ut bibendum mattis, nibh urna
        ullamcorper nibh, vitae blandit massa nunc ac augue. Aliquam mollis aliquam magna eget rutrum. Suspendisse iaculis placerat dolor, at venenatis eros rutrum non. Phasellus pretium risus ac nisi sollicitudin sit amet adipiscing nisl malesuada. Cras
        nisi nunc, hendrerit at elementum in, auctor a ligula. Maecenas pharetra condimentum aliquam. Nulla et ultricies nisi. Donec vitae neque ac augue iaculis pretium nec sed ipsum. Sed gravida facilisis congue. Nullam lobortis interdum augue ac venenatis.
        Sed luctus turpis sed urna sollicitudin imperdiet.
      </p>
      <p style="font-size:1em; color:black;">
        Nam lectus lacus, ultricies non placerat in, consectetur lacinia urna. Duis orci eros, porta nec tempus vitae, sollicitudin ac massa. Nam porta dignissim bibendum. Aenean hendrerit lacinia nisi vel viverra. Maecenas eu mi orci, vel laoreet massa. Fusce
        rhoncus, tellus eu consectetur eleifend, lacus enim ultricies diam, ut rutrum mauris dolor nec nibh. Suspendisse tincidunt neque vitae ligula adipiscing consectetur quis et nisl. Fusce eu sem diam. Aenean iaculis laoreet lacus, a vulputate augue
        egestas ut. Donec fringilla nisi sit amet arcu convallis in egestas nisl imperdiet. Nam interdum dolor nec nibh auctor eget sollicitudin orci iaculis. Proin turpis sem, ultricies facilisis euismod in, mattis in justo. Morbi feugiat semper blandit.
        Quisque tincidunt semper sodales. Nullam suscipit tempor gravida.
      </p>
      <p style="font-size:1em; color:black;">
        Vivamus eu diam id libero rhoncus ultrices ut eu lectus. Praesent diam elit, luctus a lobortis ac, faucibus in nisl. Duis id est purus, a condimentum leo. Quisque gravida metus sed arcu placerat nec convallis quam blandit. Cras laoreet vulputate sem et
        consectetur. Curabitur felis erat, auctor vitae eleifend id, suscipit eget sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porttitor ultricies tortor in tincidunt.
      </p>
      <p style="font-size:1em; color:black;">
        In hac habitasse platea dictumst. Sed erat leo, cursus vel pellentesque quis, pretium quis mi. Integer interdum neque non nisi luctus sollicitudin pellentesque nunc consectetur. Fusce auctor bibendum porta. Donec in est lacus, in luctus purus. Proin consectetur
        molestie urna, eu laoreet ligula pellentesque eget. Cras at magna sit amet lacus consectetur viverra. Mauris sed faucibus nisl.
      </p>

      <style>
        .lW {
          float: left;
          clear: left;
          height: 18px;
        }
        .rW {
          float: right;
          clear: right;
          height: 18px;
        }
      </style>

    </div>
    <div style="font-size:1em; color:black; width:40%; float:right;" class="sidebardiamond">

      <div class="diamond big" style="position:relative; left:301px; top:-150px;">What is ACM?</div>
      <div class="lW" style="width:78%;"></div>
      <div class="lW" style="width:74.6%;"></div>
      <div class="lW" style="width:71.2%;"></div>
      <div class="lW" style="width:67.8%;"></div>
      <div class="lW" style="width:64.4%;"></div>
      <div class="lW" style="width:61%;"></div>
      <div class="lW" style="width:57.6%;"></div>
      <div class="lW" style="width:54.2%;"></div>
      <div class="lW" style="width:50.8%;"></div>
      <div class="lW" style="width:47.4%;"></div>
      <div class="lW" style="width:44%;"></div>
      <div class="lW" style="width:40.6%;"></div>
      <div class="lW" style="width:44.4%;"></div>
      <div class="lW" style="width:47.8%;"></div>
      <div class="lW" style="width:51.2%;"></div>
      <div class="lW" style="width:54.6%;"></div>
      <div class="lW" style="width:58%;"></div>
      <div class="lW" style="width:61.4%;"></div>
      <div class="lW" style="width:64.8%;"></div>
      <div class="lW" style="width:68.2%;"></div>
      <div class="lW" style="width:71.6%;"></div>
      <div class="lW" style="width:75%;"></div>
      <div class="lW" style="width:78.4%;"></div>
      <div class="lW" style="width:81.8%;"></div>


      In hac habitasse platea dictumst. Sed erat leo, cursus vel pellentesque quis, pretium quis mi. Integer interdum neque non nisi luctus sollicitudin pellentesque nunc consectetur. Fusce auctor bibendum porta. Donec in est lacus, in luctus purus. Proin consectetur
      molestie urna, eu laoreet ligula pellentesque eget. Cras at magna sit amet lacus consectetur viverra. Mauris sed faucibus nisl.</div>
    <!--<div class="diamond huge" style="position:relative; left:5px; top:150px;"></div>
<br>-->


  </div>
</body>

</html>

Answer 1

好消息！我解决了大部分问题。这是我更新的jsfiddle：http://jsfiddle.net/s4XXE/1/我将继续努力解决所有问题。任何帮助都会有所帮助。

FIXED：我使用子菜单类来纠正由添加子菜单引起的偏移。
已修复：标题现在显示。我想我已将display:relative;添加到CSS中，以便它接受z-index
已修复：将菜单上的三角形更改为之前而不是之后三角形仍显示在带子菜单的菜单上。
BUG：当鼠标靠近菜单项时显示子菜单。当鼠标位于三角形上时，它应该只显示子菜单。
BUG：在菜单项上，当鼠标悬停在文本上时，链接仅为“有效”。当它超过形状时，让它“有效”会很好。
BUG：子菜单和侧边栏标题上的标题仍未居中。
BUG：更改“Home”标题会让一切都变得混乱。（需要针对不断变化的内容进行调整）

CSS钻石形状中心网站问题

1 个答案: