Question

我想在css中借助平行四边形形状制作标题菜单背景。问题是我的标题菜单文本也以平行四边形样式显示。我希望我的文字风格直观/正常。

这是我的css代码： -

    line_colours_buffer = ByteBuffer.allocateDirect(4 * 4 * (2 + line_vertices_array.size()));
    line_colours_buffer.order(ByteOrder.LITTLE_ENDIAN);

    line_colours_buffer.putFloat(1f);   // colour for line start
    line_colours_buffer.putFloat(0f);
    line_colours_buffer.putFloat(0f);
    line_colours_buffer.putFloat(0.5f);
    line_colours_buffer.putFloat(0f);   // colour for line start
    line_colours_buffer.putFloat(1f);
    line_colours_buffer.putFloat(0f);
    line_colours_buffer.putFloat(0.5f);

    ... + other lines as required.

请告诉我任何解决方案。

Answer 1

body{
    margin: 30px 150px;
}

.nav-bg {    
    width: 150px;/*for example*/
    height: 150px;/*for example*/
    background-color:rgba(2, 2, 2, 0.9);
    -webkit-transform: skew(-60deg);
       -moz-transform: skew(-60deg);
         -o-transform: skew(-60deg);
            transform: skew(-60deg);    
}
.nav-bg ul{
    color: #fff;
    -webkit-transform: skew(60deg);
       -moz-transform: skew(60deg);
         -o-transform: skew(60deg);
            transform: skew(60deg);
}

<div class="nav-bg">
    <ul class="nav navbar-nav">
        <li>test</li>
    </ul>
</div>

css中的平行四边形形状

1 个答案: