Parallelogram shape in css
I want to create a background of a menu title using a parallelogram shape in css. The problem is that my title text is also displayed in a parallelogram style. I want my text style to be 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>
Please give me any solution.
+3
source to share
1 answer
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>
+2
source to share