jquery - DIV 两侧的 CSS 菜单

Question

创建这样一个菜单的最简单和“最干净”的方法是什么:

也就是，中间有一个 DIV(固定宽度)，每边有 3 个链接，就像附件一样。

我确信这可以通过绝对定位和旋转每个 :nth-child 元素来完成，但这可能会变得困惑，我想知道是否有人知道任何更清洁的解决方案？

<ul class="menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>
<div class="text">
     Lorem Ipsum  Lorem Ipsum
     Lorem Ipsum  Lorem Ipsum
     Lorem Ipsum  Lorem Ipsum
</div>

Fiddle 是这样的:https://jsfiddle.net/am2o3og1/

Answer 1

HTML

   <ul class="menu">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
    <div class="text">
         Lorem Ipsum  Lorem Ipsum
         Lorem Ipsum  Lorem Ipsum
         Lorem Ipsum  Lorem Ipsum
    </div>
    <ul class="menu">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>

CSS:

.text {
    width: 130px;
    margin: 0 auto;
    background-color: lightblue;
    color: white;
    text-align: center;
    float:left;
}
.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float:left;
}
.menu li {

    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}

.menu li + li, .text + .menu li + li {

    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);

}

.menu li + li + li {

    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);

}


.text + .menu li {

     -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
}


.text + .menu li + li + li {

    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);

}

https://jsfiddle.net/am2o3og1/2/