DIV两侧的CSS菜单

Question

什么是最简单的＆＃34;最干净的＆＃34;创建像这样的菜单的方法：

Aka，中间有一个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>

小提琴就像这样：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/