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);
}
Related
This question already has answers here:
Incorrect border rendering when using css transform in Firefox
(3 answers)
Closed 4 years ago.
In Firefox, I'm having an issue where the css generated arrow renders the border properties with a cut-through outline at the center point. Is there a fix for this?
It renders perfectly fine in all other modern browsers where the border outline isn't visible and shows a clear arrow.
The bug is only visible in Firefox.
All other browsers (Chrome, Edge, Opera, IE11):
Firefox:
.bx-prev, .bx-next {
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
transition: .25s all;
cursor: pointer;
z-index: 10000;
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
top: 120px;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
top: 120px;
right: 420px;
}
<a class="bx-prev"></a>
<a class="bx-next"></a>
Use translateZ(1px) with rotate property value
transform:translateZ(1px) rotate(-45deg)
This seems to be, how Firefox is translate the element using the matrix value in transform property.
Another way to solve such things is making a svg element or getting one from fontawesome, download the .svg file. Using https://www.figma.com, to easily manipulate it and voilá.
I am expecting some thing like the below pic. But I want to add text on that vertical border.
on that border I want to add text ex: Student detail
I already saw this link.
And also I tried this below code to rotate: -90 degree
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(-90deg);
It is working fine. But I want to merge those 5 points with that vertical text.
How to achieve it?. I am new to css
I think you want to do something like that >
https://codepen.io/dakata911/pen/NweMpy
/* Rotate div */
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
Not exactly a pure CSS solution, but it's pretty easy to get vertical text by adding line breaks, and then using pre spacing. Second example uses a bit of JS to avoid hardcoding the line breaks into the markup.
h2 {
white-space: pre;
text-align: center;
width: 40px;
background: grey;
color: white;
padding: 10px;
}
<h2>V
e
r
t
i
c
a
l
T
e
x
t
</h2>
const h2 = document.querySelector('h2')
h2.innerText = h2.innerText
.split('')
.join('\n')
h2 {
white-space: pre;
text-align: center;
width: 40px;
background: grey;
color: white;
padding: 10px;
}
<h2>Vertical Text</h2>
This question already has answers here:
How to apply multiple transforms in CSS?
(9 answers)
Closed 6 years ago.
I'm trying out the css animation using #keyframes, however the css Transform rotate and translate properties aren't working together.
Please advise on what has gone wrong here. Thanks!!
You can check the code on codepen:
http://codepen.io/anon/pen/XdzwZB
following is my #keyframes code:
#keyframes slideIn {
0%, 100% {
transform: translate(10px);
transform: rotate(0deg);
color: red;
}
25% {
transform: translate(125px);
transform: rotate(360deg);
color: green;
}
}
The correct way to apply multiple transforms is to simply place them all in one transform property, with each transform separated by a space:
#keyframes slideIn {
0%, 100% {
transform: translate(10px) rotate(0deg);
color: red;
}
25% {
transform: translate(125px) rotate(360deg);
color: green;
}
}
Updated codepen
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>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am trying to display a dynamic iframe on my site and I need to make the entire pic be a clickable link to the original page. Which is here:
http://radar.weather.gov/ridge/radar.php?rid=okx&product=N0R&loop=yes
iframe {
-moz-transform: scale(01.2, 01.2);
-webkit-transform: scale(01.2, 01.2);
-o-transform: scale(01.2, 01.2);
-ms-transform: scale(01.2, 01.2);
transform: scale(01.2, 01.2);
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
iframe-link1 {
position:absolute;
top:0;
left:0;
display:inline-block;
width:90px;
height:60px;
z-index:5;
}
<div class="iframe-link1">
<div style="overflow: hidden;">
<iframe scrolling="no" src="http://radar.weather.gov/ridge/Conus/northeast_loop.php" style="border: 0px none; margin-left: -537px; height: 700px; margin-top: -520px; width: 590px;"></iframe>
</div>
</div>
I'm not even sure if this is possible.
FYI, I have permission to use the other site.
You can do it 2 ways, one is to create an a tag which will overlap the iframe.
Another way is to use javascript, this is more elegant.
<script>
document.getElementById("your_iframe_id").contentWindow.document.body.onclick =
function() {
window.location.href = 'http://newurl.com';
}
</script>