I made a page consisting of several sections with different background colors and a transparent background image with noise (transparent "PNG file"). At the top of each section I placed a triangular shaped div with the color of the section above. I would also like to add the noise image to the triangles but I can't figure out how.
I've tried the border-image attribute in "CSS" but that just erases the whole triangular shape for some reason..
I would be grateful if you could help me out. "This" is the site I'm working on.
You can use a rotated pseudo element :
Generic solution:
FIDDLE
HTML:
<div></div>
CSS:
div {
width:200px;
height:200px;
overflow:hidden;
}
div:before {
content:"";
display:block;
width:70%;
height:70%;
background-image: url(/*Path to your image*/);
transform: rotate(-45deg);
transform-origin:0 0;
-ms-transform: rotate(-45deg);
-ms-transform-origin:0 0;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin:0 0;
}
EDIT: Your use case
In your use case, you can consider just rotating .arrow-down by 45deg and set overflow:hidden; on the sections. (you also need to remove the existing borders on .arrow-down and give it desired dimensions)
Related
I'm trying to create a responsive triangle div which will sit at the top of the page as a header.
I was able to achieve that with the following code:
div{
width: 0;
height: 0;
border-style: solid;
border-width: 200px 400px 0 0;
border-color: #007bff transparent transparent transparent;
}
<div></div>
The problem is that I want this triangle to be responsive to the width of the page and change proportionally in height as well.
I tried setting width and height to percent based, however that produced a really small triangle which you can see here:
http://jsfiddle.net/Ltbzkq0e/1/
How to make the borders work with percent without having to use webkits? Is that possible, if not how do I achieve this effect with webkits?
EDIT:
I would also like to fit content in this div. At the moment the only way I can think of is to use absolute positioning and set height to -20px, etc... Is there a better way of accomplishing this?
You can use transform-rotate and a pseudo element to create a responsive triangle. This technique is detailed here : CSS triangles with transform rotate.
For your specific case it could look like this :
DEMO
.tr{
padding-bottom:30%;
position:relative;
overflow:hidden;
}
.tr:before{
content:'';
position:absolute;
top:0; left:0;
width:120%; height:100%;
background-color : #0079C6;
-webkit-transform-origin:0 100%;
-ms-transform-origin:0 100%;
transform-origin:0 100%;
-webkit-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
transform: rotate(-17deg);
}
.content{
position:absolute;
}
<div class="tr">
<div class="content"> ... CONTENT HERE ...</div>
</div>
If you need IE8 support, you will need to use a JS fallback. This answer describes a way to achieve it.
if you don't care about IE8 and recent Android support — and since you need to have border-width proportional to the page size — you can use viewport-based (vw and vh) units
e.g.
border-width: 100vw 100vh 0 0;
example fiddle: http://jsfiddle.net/swbfqemr/
I have jquery adding a class to scale a div in certain circumstances:
$("#wrapper").addClass("doubleDiv");
The css:
.doubleDiv{ transform: scale(2); }
#wrapper { height:100%; position:relative; z-index:2; background-color:#111; max-width:320px; min-height:480px; margin:0px auto; }
It doubles the size fine, but the div's content gets shifted up past the top of the browser, so that roughly the top third is hidden, and you cannot scroll further up.
I removed each of the styles in #wrapper one by one, until none were left. Apart from screwing up the layout, the same thing happens when the scale is carried out.
To eliminate the chance of any of my jquery causing it, I coded
alert('stop1');
$("#wrapper").addClass("doubleDiv");
alert('stop2');
The display problem occurs before 'stop2' is displayed.
What else could cause this?
Cheers
Demo
you need to add transform-origin
css
.doubleDiv {
transform: scale(2);
transform-origin:50% 0%;
-ms-transform-origin:50% 0%;/* IE 9 */
-webkit-transform-origin:50% 0%; /* Chrome, Safari, Opera */
}
Transform scale scales the object in place. Use transform-origin to define from where you want to scale. Because scaling does not affect positioning at all and the default scaling point is center centre, it moves off screen. Check the follow code to see how it solves this problem:
<html>
<head>
<style type="text/css">
#div {
-webkit-transform: scale(2,2);
-webkit-transform-origin: top left;
background: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
I'm trying to skew one single corner of my div background as shown at the green checkmark in the image below:
In CSS3 I'm however unable to achieve that, skewing completely skews every corner. I just want to skew the bottom right corner to the left (say 25px) and maintain the perspective (as shown in the image above).
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);
Fiddle: http://jsfiddle.net/3eX5j/
My code is:
div {
width: 300px;
height:80px;
margin-left:40px;
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);
}
All you need to do is to think in 3d:
div {
width: 300px;
height:80px;
margin-left:40px;
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: perspective(100px) rotateX(-25deg);
-webkit-transform-origin: left center;
-moz-transform: perspective(100px) rotateX(-25deg);
-moz-transform-origin: left center;
}
fiddle
explanation: you are rotating the element towards you in the upper part. But, the perspective (handled though the transform origin, it's a function !) makes the left hand rotation not to translate in an horizontal movement.
See how can be controlled what is the final size
fiddle with multiple options
Suppose I've the background like this:
And the normal repeated background look like this:
Now I want the inversely repeated of background-image should look like this:
And even if possible again repeat inversely like this:
Anyway the third option is unnecessary coz we can make like that by taking repeated image
Try this type of image so u get cross related look like you mentioned on last picture
I don't think there is a proper way with css.
The easiest might be for you to edit your picture like this:
and repeat it then.
It is possible to add multiple background to one div. However there is no background transform property, thus not support the multiple backgrounds.
I'm not sure if this would work for you, but you can use :after psuedo-class for this:
div
{
width: 400px;
height: 200px;
background: url('http://placehold.it/400x200');
background-repeat: no-repeat;
position: relative;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
div:after
{
content: '';
display: block;
position: absolute;
width: 400px;
height: 200px;
background: url('http://placehold.it/400x200');
background-repeat: no-repeat;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
top: -200px;
}
Where the second background is re-inverted and the first background inverted. Of course you can edit this to your wishes.
jsFiddle 2 backgrounds
Where you can even do this with 3 backgrounds
jsFiddle 3 backgrounds
I hope you can work with this!
it is posible to flip the image once with CSS, However css3 does not support(afaik) doing alternating repeated background image.
You will have to use the second image that you posted as the background. This conatins the whole pattern that you want repeated.
For Firefox only you could use -moz-element
<div class="repeated-background"></div>
<div id="mybackground">
<img src="myimage.png" />
<img src="myimage.png" class="vflip" />
</div>
css:
.repeated-background {
background: -moz-element(#mybackground) repeat;
}
.vflip {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
But that's not really a sane way to approach things :)
First of all, an image of what I am trying to acheive:
Sample here:
http://i.imgur.com/3BpFF.png
The white box with the word 'div' in it is obviously the div I have. For my purposes, it's a div centered in a page using width:500px; margin: 0 auto;. What I want is to be able to align some rotated text (using -moz-transform: rotate(90deg) or alternatively prefixed rotates) along the top of the div, like the word 'Holy' above (sample text). I would also like to set the baseline on that div, though it isn't that important.
By the way, I used some absolute positioning in Firebug to get the text aligned there - it was hacked there using per pixel positioning. It's not very flexible (if at all) because once I increase the font size or change the position of the div, it's broken.
Also: I am open to using SASS and other such things (I don't have any experience with it yet, but I do I think it allows use of variables which may help).
When you can use CSS transform it means you can use pseudo elements in your CSS code. Then I will add that "Holly" part via :after pseudo element.
div:after{
content:"Holy";
line-height:20px;
position:absolute;
background:yellow;
padding:0 10px;
left:100%; top:0;
-webkit-transform:rotate(90deg) translateY(-100%);
-webkit-transform-origin:0 0;
}
As you can see I've use translateY to move this part out of the div, because we rotated the thing before then translateY will work as translateX.
transform-origin is set to 0 0.
This code is independent from you div size.
Look at it live here:
http://jsbin.com/akaziy/2/
You can place something like this in your .css file (the margin-top & margin-bottom are just examples)
div {
width:500px;
margin: 0px auto;
}
.holly {
margin-top:20px;
margin-left:520px
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer 9*/
-ms-transform: rotate(90deg);
/*undefined prefix*/
transform: rotate(90deg);
}