This question already has answers here:
How to use skew only in the parent element?
(4 answers)
Closed 7 years ago.
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>
Related
I would like to put "VERTICAL_TEXT" (third bootstrap column) with 90ยบ rotation.
I have tried the following code:
<div class="row">
<div class="col-xs-2" style="background-color: yellow;">
<span>FOO1</span><br/>
<span>FOO2</span>
</div>
<div class="col-xs-8" style="background-color: red;">
<div>
<span>BAR1</span><br/>
<span>BAR2</span><br/>
<span>BAR3</span><br/>
<span>BAR4</span><br/>
</div>
</div>
<div class="col-xs-2" style="background-color: blue;">
<span class="rotate_text">VERTICAL TEXT</span>
</div>
</div>
.text_rotate {
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
The following fiddle ilustrates the issue:
https://jsfiddle.net/fbtg1zjx/
Edited:
I included the inline-block style and the text is now rotated as suggested in answers, however the text does not start in the upper part of the document. (the whole text includes 4 characters before N/00001. In green it is the span item, in blue the parent div.
You should put the text_rotate on the parent div.
Many CSS rules including Width, Height and such transforms doesn't work on elements with display:inline, an span is by default an inline elemnt, just give it a display:block or inline-block and it should work for you..
also try to add a general transform rule , transform:rotate(90deg);
to fix the second issue where the text is outside of the container you can use following CSS fixes :
.text_rotate {
/* add translate(50%) to transforms */
-webkit-transform: rotate(90deg) translate(50%);
-moz-transform: rotate(90deg) translate(50%);
-ms-transform: rotate(90deg) translate(50%);
-o-transform: rotate(90deg) translate(50%);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(90deg) translate(50%);
display:block;
}
or use transform origin
.text_rotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(90deg);
display:block;
transform-origin: 0% 50%;
}
Please test and see which one is better for your situation.
Hope it helps
I am creating a thermometer for fundraising on my website. I have created a code to make the thermometer but it is at a horizontal line not a vertical line. Can you please help to rotate this?
Thanks
<div class="primary_font font-32px"><span class="font-16px"></span></div>
<div class='donation_raise_bar' style="background-color:#dee1dd;border-radius:9px;position:relative;width:800;height:26px;">
<span class="fundraise_raised_percentage" style="background-color:#fb1085;border-radius:20px;display:block;overflow:hidden;height:100%;line-height:1.5;min-width:1%!important;width:50%">
<center><span class="fundraise_amount_raised white_text arial_font font-12px bold-text">50%</span></center>
</span>
</div>
<div class="margin-top">
<div class="arial_font font-16px"><span class="bold-text"></span></div>
</div>
<div id="container_2"></div>
</div>
Use transform css property. Also Remember to use margins to fix it proper position.
<style>
.donation_raise_bar {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
</style>
If you want to rotate an element with css you can try like this
.rotate {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
.rectangle-box{
width: 200px;
height: 200px;
background-color: yellow;
}
now apply .rotate to your html element. Like
<div class="rectangle-box rotate">
</div>
Sorry, i can't comment because of my too low reputation.
You will probably need to use "transform-origin" css property when you start using rotate to have a better control on the axis of rotation.
This question already has answers here:
How to skew element but keep text normal (unskewed)
(7 answers)
How to create these skewed menu items? [duplicate]
(2 answers)
Closed 8 years ago.
Is a menu like this possible with only CSS?
Like this: http://jsfiddle.net/wmgmqrr9/ but with sloped borders
<ul>
<li class="active">home</li>
<li>about</li>
<li>contact</li>
</ul>
Yes, you can do something like this, using CSS3 transform:
http://jsfiddle.net/gobuctmn/5/
li {
float: left;
list-style-type: none;
padding: 5px;
border: 1px solid;
display: inline-block;
transform:skewX(10deg));
-webkit-transform: skewX(10deg);
-moz-transform: skewX(10deg);
-ms-transform: skewX(10deg);
-o-transform: skewX(10deg);
}
Im trying to use some CSS3 code to rotate my text but I think it doesn't get recognized?
CSS code:
.menu {
background-image:url('button.jpg');
cursor: pointer;
width: 61px;
height: 205px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: rl-tb;
}
HTML code:
<div id="menu-box">
<a class="menu" href="#" >HOME</a>
<a class="menu" href="#" >MYSELF</a>
<a class="menu" href="#" >PORTFOLIO</a>
<a class="menu" href="#" >CONTACT ME</a>
</div>
Im not sure what the problem is. I am missing something?
You can't transform inline elements; change the display value of .menu to inline-block instead.
Simplified example: http://jsfiddle.net/vg73f/
The <a> tags that your .menu class apply to are inline elements. They need to be block level elements in order for the transform to apply.
By adding display: block; we can see that a transform applies correctly.
http://jsfiddle.net/RvrBM/
Alternatively you could use display: inline-block; to allow the elements to rotate but stay in the inline arrangement.
http://jsfiddle.net/g5BRT/
Additionally, as Pavlo noted in the above comments, you are missing the unprefixed transform in your code. It should look like this:
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
can be done a slice between two divs in CSS like the following photo ?
I tried to google it but didn't found anything usefull for my problem
Thanks !
I suggest you to do it with image .
But if you want to do with css , here is example ,
css
.parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg);
-moz-transform: skew(20deg); -o-transform: skew(20deg); background: red;
float:left;margin-left:18px;margin-right:8px;}
.parallelogram2 { width: 150px; height: 100px; -webkit-transform: skew(20deg);
-moz-transform: skew(20deg); -o-transform: skew(20deg); background: Black;float:left; }
html
<div class="parallelogram"></div>
<div class="parallelogram2"></div>
Fiddle example !
And you can check and learn how css shapes works here and here !
Good Luck !