html - 在使用未排序列表的梯形 div 中居中文本

Question

试图让每个梯形的文本居中 - 但不确定如何!

http://jsfiddle.net/fYkq4/

HTML 结构如下:

<ul id="menu">
    <ul><div class="fade-div" id="trapezium1"> HOME </div></ul>
    <ul><div class="fade-div" id="trapezium2"> HOME </div></ul>
    <ul><div class="fade-div" id="trapezium3"> HOME </div></ul>
    <ul><div class="fade-div" id="trapezium4"> HOME </div></ul>
    <ul></ul>
</ul>

我使用 CSS border fidgeting 技术来获得梯形，但是随着形状倒转，我必须在使用 border-bottom: 80px solid blue; 和 border-top: 80px 纯蓝色； - 即如果我使用 top 文本在陷阱下方，如果我使用 bottom 文本在里面(但实际上在下方) 陷阱。

我怎样才能使所有 HOME 始终位于每个梯形内？ 我是否需要将文本移出 div 并使 div float ？或者将文本放入另一个 div 并使其 float ？

Answer 1

你可以像这样 fiddle:

http://jsfiddle.net/xonium/PqXbu/

重要的部分是拦截器

<div id="menu">
    <ul>
      <li class="fade-div" id="trapezium1"> HOME1 </li>
      <li class="fade-div" id="trapezium2"> HOME2 </li>
      <li class="fade-div" id="trapezium3"> HOME3       
        <div class="blocker"></div>
      </li>
      <li class="fade-div" id="trapezium4"> HOME4 
        <div class="blocker"></div>
      </li>
    </ul>  
</div>

它的作用就像上面的两个梯形，只是颜色相反。

.blocker {
  background-color: blue;
  height: 0;
  width:0;
  right:0;
  border-bottom: 80px solid red;
  border-left: 40px solid transparent;
  border-right: 0px solid transparent;
  float: right;
}