css中的平行四边形 [英] parallelogram shape in css

问题描述

我想借助 css 中的平行四边形形状制作标题菜单背景.问题是我的标题菜单文本也以平行四边形样式显示.我希望我的文字样式为直线/法线.

这是我的 css 代码:-

.nav-bg{背景色:rgba(2,2,2,0.9);向左飘浮;歪斜-webkit-transform: skew(-60deg);-moz-transform: skew(-60deg);-o-变换:倾斜(-60度)；变换:倾斜(-60度)；}<div class="nav-bg"><ul class="nav navbar-nav"><li>test</li></ul>

请告诉我任何解决方案.

解决方案

body{边距:30px 150px；}.nav-bg {宽度:150px;/*例如*/高度:150px;/*例如*/背景色:rgba(2, 2, 2, 0.9);-webkit-transform: skew(-60deg);-moz-transform: skew(-60deg);-o-变换:倾斜(-60度)；变换:倾斜(-60度)；}.nav-bg ul{颜色:#fff;-webkit-transform: skew(60deg);-moz 变换:倾斜(60 度)；-o-变换:倾斜(60度)；变换:倾斜(60度)；}

<ul class="nav navbar-nav"><li>测试</li>

I want to make a header menu background with the help of parallelogram shape in css. Problem is my header menu text is also show in parallelogram style . I want my text style as a straight/normal.

Here is my css code:-

.nav-bg{
   background-color:rgba(2,2,2,0.9);
   float:left;
    Skew 
   -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>

Kindly advise me any solution.

解决方案

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中的平行四边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！