I'm trying to position one element to the left and one to the right of the browser window, both contains an ul with CSS transform rotate. I have managed to position .rotate-left and its ul to the left, but I have been unable to position the ul inside .rotate-right to the right. (It needs to be visible on a horizontal line from right to left if transform is not supported.)
CSS:
.rotate-left ul li,
.rotate-right ul li {
display: inline;
}
.rotate-left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 10em;
white-space: nowrap;
background: silver;
}
.rotate-left ul {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
height: 1.5em;
margin: auto;
background: red;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
}
.rotate-right {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 10em;
white-space: nowrap;
background: silver;
}
.rotate-right ul {
position: fixed;
top: 0;
bottom: 0;
right: 0;
height: 1.5em;
margin: auto;
background: red;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-webkit-transform: rotate(90deg) translate(-50%, 50%);
-moz-transform: rotate(90deg) translate(-50%, 50%);
}
HTML:
<div class="rotate-left">
<ul>
<li>left</li>
<li>left</li>
<li>left</li>
</ul>
</div>
<div class="rotate-right">
<ul>
<li>right</li>
<li>right</li>
<li>right</li>
</ul>
</div>
-
Demo: http://codepen.io/anon/pen/FtyEG
I have built upon this 100% height block with vertical text.
I solved it and cleaned the code up a bit.
.left,
.right {
position: fixed;
top: 0;
bottom: 0;
height: 1.5em;
margin: auto;
}
.left {
left: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
-ms-transform: rotate(-90deg) translate(-50%, 50%);
-o-transform: rotate(-90deg) translate(-50%, 50%);
transform: rotate(-90deg) translate(-50%, 50%);
}
.right {
right: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: rotate(90deg) translate(50%, 50%);
-moz-transform: rotate(90deg) translate(50%, 50%);
-ms-transform: rotate(90deg) translate(50%, 50%);
-o-transform: rotate(90deg) translate(50%, 50%);
transform: rotate(90deg) translate(50%, 50%);
}
Demo: http://codepen.io/anon/pen/LHeaB
I think that I get it more or less right. It would be:
.rotate-right ul {
-webkit-transform-origin: 78% 100%;
-webkit-transform: rotate(90deg) translate(0%, 0%);
You don't need to translate if you choose ok the transform origin; going to 78% would be to compensate for the li width
Related
This question already has answers here:
How to create a Slanted Background with CSS? [duplicate]
(3 answers)
Closed 2 years ago.
need divide background on two parts:
I have:
body {
background: #b6da8c;
overflow: hidden;
}
body:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #005370;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
z-index: -1;
}
As you can see there is divided into 3 actually, how to change it to have 2 as on image?
You could change the transform-origin to be at the bottom.
body {
background: #b6da8c;
overflow: hidden;
}
body:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #005370;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
z-index: -1;
transform-origin: bottom;
}
Really simple fix without too much modification to your code. Just push the element off the screen and increase its width.
body {
background: #b6da8c;
overflow: hidden;
}
body:before {
content: '';
position: absolute;
top: 0; right: -200px;
width: 60%; height: 100%;
background: #005370;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
z-index: -1;
}
body {
background: #b6da8c;
overflow: hidden;
}
body:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 70%;
height: 100%;
background: #005370;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
z-index: -1;
}
This question already has answers here:
Left/right transparent cut out arrow
(4 answers)
Closed 6 years ago.
I'm trying to put a transparent arrow on the right side of an image, vertically in the centre and showing the background image.
I've read this answer, and this codepen is basically exactly what I want, but I can't get my head around why it works and what I'd need to change to place it on the right hand side.
Codepen code:
.wrap {
position: relative;
overflow: hidden;
width: 70%;
height:150px;
margin: 0 auto;
background-color:#fff;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
bottom: 0;
width: 50%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
There are two polygons with white background over the image, it is not an arrow but the space between the two polygons. Changin the width and the position of :before and :after you can move the triangle.
.wrap {
position: relative;
overflow: hidden;
width: 70%;
height:150px;
margin: 0 auto;
background-color:#fff;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
bottom: 0;
width: 100%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 97%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>
In Firefox in some resolutions appears a pixel of the image in the bottom, can fix width bottom:-1px in .wrap::before, .wrap::after
Main css properties that you need to change are transform-origin and transform with some other changes as done below:
.wrap {
position: relative;
overflow: hidden;
width: 70%;
height:150px;
margin: 0 auto;
background-color:#fff;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
right: 0;
height: 50%;
background-color: inherit;
padding-right:3%;
}
.wrap:before {
bottom: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewY(45deg);
-webkit-transform: skewY(45deg);
transform: skewY(45deg);
}
.wrap:after {
top: 50%;
-ms-transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-ms-transform: skewY(-45deg);
-webkit-transform: skewY(-45deg);
transform: skewY(-45deg);
}
<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>
This is my HTML code:
<style>
#myelement
{
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
border:#000000 solid 2px;
width:500px;
height:500px;
}
#myelement:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0%;
left: 0%;
z-index: -1;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
background: url(image.jpg) 0 0 no-repeat;
}
</style>
<div id="myelement"></div>
This is image.jpg file:
This is output of browser:
Here, background image is fixed and container is rotating. I want to make reverse. i,e Container will be fixed and background will rotate.
If I understood your question properly, you only need to apply transform: rotate on the pseudo-element which has the background and nothing on the container (like in the below snippet).
#myelement {
position: relative;
overflow: hidden;
border: #000000 solid 2px;
width: 100px;
height: 100px;
}
#myelement:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: -1;
transform: rotate(30deg);
background: url(http://i.stack.imgur.com/lndoe.jpg) 0 0 no-repeat;
}
<div id="myelement"></div>
I am aware this has been answered previously however that was for the bottom of a div and I cannot work out how to do it for the left and right of a div.
I am trying to acheive the same effect as this:
BODY {
background: url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg) 0 -100px;
}
#wrapper {
overflow: hidden;
height: 116px;
}
#test {
height: 100px;
background-color: #ccc;
position: relative;
}
#test:before {
content: "";
position: absolute;
left: -6px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
}
#test:after {
content: "";
position: absolute;
right: -6px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
}
<div id="wrapper">
<div id="test"></div>
</div>
But with the cut out on the left and another with the cut out on the right.
This solution is adapted from this answer : Transparent arrow/triangle
The point is to use two skewed pseudo elements to make the transparent cut out arrow. Both pseudo elements are absolutely positioned and skewed.
In the following demo, the arrow is on the left. To make the same on on the right, you could duplicate the .arrow element and use scaleX(-1) + positioning on the second one. This will allow you to change both sides at the same time and have less CSS. Or you can make a new element based on the first one and change the positioning and skew properties.
DEMO
.wrap {
position: relative;
overflow: hidden;
width: 70%;
margin: 0 auto;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.arrow {
position: absolute;
left: 0; top:0;
width: 3%;
height:100%;
background-color: rgba(255,255,255,.8);
}
.arrow:before, .arrow:after {
content:'';
position: absolute;
left: 100%;
width: 100%;
height:50%;
background-color: inherit;
}
.arrow:before {
bottom: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewY(-45deg);
-webkit-transform: skewY(-45deg);
transform: skewY(-45deg);
}
.arrow:after {
top: 50%;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform: skewY(45deg);
-webkit-transform: skewY(45deg);
transform: skewY(45deg);
}
<div class="wrap">
<img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" />
<div class="arrow"></div>
</div>
For the same output, you can use an svg :
DEMO
.wrap {
position: relative;
overflow: hidden;
width: 70%;
margin: 0 auto;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.arrow{
position:absolute;
left:0; top:0;
height:100%;
}
<div class="wrap">
<img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" />
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 100">
<path d="M-1 -1 H10 V45 L5 50 L10 55 V101 H-1z" fill="#fff" fill-opacity="0.8" stroke-width="0"/>
</svg>
</div>
It can be made with a single element using inset box-shadow and pseudo-elements :before and :after
The elements are skewed by 45deg and -45deg to create the transparent gap. Inset box-shadow is used to increase the width of the arrow banner.
Fiddle (1 element)
body {
font-size: 10px;
}
div {
background: url('https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg');
height: 33.3em;
width: 50em;
position: relative;
overflow: hidden;
box-shadow: inset 2em 0 0 0 rgba(255, 255, 255, 0.6);
}
div:before, div:after {
content: "";
position: absolute;
left: 2em;
background-color: rgba(255, 255, 255, 0.6);
height: 25em;
width: 2em;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
div:before {
bottom: -8.35em;
-webkit-transform: skewY(45deg);
-moz-transform: skewY(45deg);
-ms-transform: skewY(45deg);
transform: skewY(45deg);
}
div:after {
top: -8.35em;
-webkit-transform: skewY(-45deg);
-moz-transform: skewY(-45deg);
-ms-transform: skewY(-45deg);
transform: skewY(-45deg);
}
<div></div>
Bugs : Browser rendering of box-shadow isn't consistent when using veiwport units. On zooming-out to 33%, GC shows 1px gap b/w pseudo-element and box-shadow. This bug doesn't occur with px and em units on zooming.
A better approach than the one given above would be to use one element on top of img element. The rest properties (overflow: hidden;, box-shadow) too are used, but this doesn't have the gap between the arrow even on zooming.
Fiddle (2 elements)
Note :
Ideas used from earlier post here.
All measurements are done in em with a set font-size of 10px.
You could use CSS3's clip-path property but it's a bit bleeding-edge. However, if you don't need to support IE there are plenty of useful examples at http://css-tricks.com/clipping-masking-css/
div {background: yellow; width:400px; height:300px;}
div img {
-webkit-clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 90% 40%, 100% 50%, 90% 60%, 90% 100%, 10% 100%, 10% 60%, 0% 50%, 10% 40%);
clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 90% 40%, 100% 50%, 90% 60%, 90% 100%, 10% 100%, 10% 60%, 0% 50%, 10% 40%);
}
<div><img src="http://lorempixel.com/400/300/nature/" /></div>
Hey I just modified your existing one. Probably could have done it a bit cleaner but you get the idea. This is the left side. Pretty easy to swap it to the right from this.
JSFiddle
HTML
<div id="wrapper">
<div id="test"><div id="fill"></div>
<div id="fill2"></div></div>
</div>
CSS
BODY{
background: url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg) 0 -100px;}
#wrapper {
overflow: hidden;
height: 116px;}
#fill{
height: 40px;
position:absolute;
width:30px;
left:-30px;
background: #ccc;}
#fill2{
height: 40px;
position:absolute;
width:30px;
background: #ccc;
bottom:0;
left:-30px;}
#test {
height: 116px;
width: 692px;
background-color: #ccc;
position: relative;
float:right;}
#test:before {
content:"";
position: absolute;
top: 40px;
height: 50%;
width: 30px;
left: 0;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);}
#test:after {
content:"";
position: absolute;
bottom: 40px;
height: 50%;
width: 30px;
left: 0;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);}
I am new to web development (and self taught) so please excuse if this is a dumb question.
How do I show text inside an icon? Such as number inside a heart etc.
I assuming for this purpose webfont icon will not work?
Is using CSS shapes is better for thus purpose - so that it will render when resized etc?
Or is vector better option.
Here is the CSS for heart that I was planning to use. But I am not clear as how to display text inside.
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
trans.orm-origin :100% 100%;
}
Thanks in advance!
Here is my solution
I inserted a span between the div tags. That way, like mbratch said, you can set the z-index property as a higher value. This, along with position:absolute, will give you what you are looking for.
I used jQuery to vertically center it, in case you wanted multiple lines of text