My code is as shown below:
.test {
position: relative;
top: 1080px;
width: 100%;
height: 100px;
background-color: black;
transform: rotate(-6deg);
}
<div class="test">this is test</div>
With this code, I get strip like this:
But I want the strip to be like this:
You can use transform: skewY instead:
.test {
position: relative;
top: 50px;
width: 100%;
height: 100px;
background-color: black;
transform: skewY(-10deg);
color: white;
}
.orange {
background:orange;
}
.orange span {
transform: skewY(10deg);
display: inline-block;
}
<div class="test">first div</div>
<div class="test orange"><span>second div</span></div>
Change the value of the top based on your need. I didn't use the 1080px so there will be no scroll in this example...
update
Also added an example on how to "align" a text back to the normal alignment inside a skewed element.
Related
I need to create an image gallery, in which the individual images are irregular triangles (emphasis on irregular).
I found limited examples on how to achieve triangle images via html and css, without modifying the images themselves. One example I found in this CodePen https://codepen.io/thebabydino/pen/liDCz was a step in the right direction, but looking at it, I can't find a way to make the images irregular triangles.
The result I am trying to achieve is this:
<div class='pageOption'>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/A.png'>
</a>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/D.png'>
</a>
</div>
This is the basic HTML I will be using and the CSS is:
.pageOption {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 40em;
height: 27em;
}
.option, .option img {
width: 100%;
height: 100%;
}
.option {
overflow: hidden;
position: absolute;
transform: skewX(-55.98deg);
}
.option:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.option:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.option img {
opacity: .75;
transition: .5s;
}
.option img:hover {
opacity: 1;
}
.option img, .option:after {
transform: skewX(55.98deg);
transform-origin: inherit;
}
Mind that the HTML and CSS I have may not be the optimal for my problem. I think the shape of the images I am using (rectangular) have something to do with this.
Would be better if the solution is better supported across browsers.
You can do it with skew like below if you cannot use clip-path:
.box {
overflow: hidden;
width: 200px;
height: 200px;
display:inline-block;
}
.triangle {
width: 100%;
height: 100%;
transform: skewX(-20deg) skewY(45deg); /* 27deg instead of 20deg to have a regular triangle */
transform-origin: bottom left;
overflow: hidden;
background-size:0 0;
}
.triangle.bottom {
transform-origin: top right;
}
.triangle:before {
content: "";
display: block;
width: inherit;
height: inherit;
background-image: inherit;
background-size:cover;
background-position:center;
transform: skewY(-45deg) skewX(20deg); /* We invert order AND signs*/
transform-origin: inherit;
}
.triangle:hover {
filter:grayscale(100%);
}
.adjust {
margin-left:-120px;
}
body {
background:#f2f2f2;
}
<div class="box">
<div class="triangle" style="background-image:url(https://picsum.photos/id/155/1000/800)"></div>
</div>
<div class="box adjust">
<div class="triangle bottom" style="background-image:url(https://picsum.photos/id/159/1000/800)"></div>
</div>
How to fit an image inside a div and this div is rotated at 45deg?
Add scale value in transform style for img like this:
.profile-photo { width: 210px; height: 210px; position: relative; left: 43px; top: 50px; border: 8px solid #000; border-radius: 60px; transform: rotate(45deg); overflow: hidden; z-index: 2; background: #34983e;padding:0 }
.profile-photo img {
width: 100%;
transform: rotate(-45deg) scale(1.21)
}
<div class="profile-photo">
<img alt="Profile photo" src="http://www.michiganurology.com/wp-content/uploads/2015/10/reddy.jpg" onerror="this.onerror=null;this.src='https://via.placeholder.com/500/E5E8EC/4B89DA?text=error+image';">
</div>
use below code.
HTML
<div class="div">
<img src="index.png">
</div>
CSS
.div
{
width: 500px;
background: lightblue;
transform: rotate(40deg);
}
W3schools transforms
This has been asked before but none of the answers seem to be working for me.
My issue is related to a lost z-index when a transformation is applied.
I have an overlay div with a defined z-index, it has a sibling with no z-index and this div contains a child with a z-index greater than the overlay. This child can be dragged around.
At some point I rotate this sibling and it's child loses the z-index.
How can I prevent this from happening?
I tried several solutions attemps like transform-style: flat; or transform-style: preserve-3d; but with no luck
This is the code
HTML
<div class="main">
<div class="some_container">
<div class="drag"></div>
</div>
</div>
<div class="overlay"></div>
<br><br><br>
<button>rotate!</button>
CSS
body {
padding: 20px
}
div {
border: 1px solid black;
width: 50px;
height: 50px;
}
.main {
border: 1px dashed blue;
padding: 15px;
}
.some_container {
position: relative;
background-color: green;
}
.overlay {
background-color: red;
position: absolute;
left: 35px;
top: 35px;
z-index: 5
}
.drag {
position: relative;
width: 30px;
height: 30px;
background-color: lime;
z-index: 10;
cursor: move;
}
.rotated {
transform: rotateZ(15deg);
}
.rotated .drag {
background-color: yellow;
transform: rotateZ(-15deg);
position: relative;
z-index: 100;
transform-style: flat;
}
JS
$(".drag").draggable();
$("button").click(function()
{
$(".some_container").addClass("rotated");
});
fiddle: https://jsfiddle.net/2zkn9dap/
The transform that you have in your .rotated class creates a new stacking context that is changing the order that the elements are layered. A great explanation with more detail can be found here: z-index is canceled by setting transform(rotate)
The best approach to solving this is to move the .drag div to be a sibling of the .overlay and .some_container div. Then update your JS to add the rotated class to the green and yellow squares so they are both rotated. Otherwise, you'll never be able to get the yellow square on top of the red one consistently, because the z-index of the parent, in this case the .some_container div takes precedence.
$("button").click(function(){
$(".green").addClass("rotated")
$(".lime").addClass("rotated").css({backgroundColor: 'yellow'});
});
body {
padding: 20px
}
div {
border: 1px solid black;
width: 50px;
height: 50px;
}
.container {
border: 1px dashed blue;
padding: 15px;
}
.green {
position: absolute;
background-color: green;
z-index: 2;
}
.red {
background-color: red;
position: absolute;
left: 35px;
top: 35px;
z-index: 3;
}
.lime {
position: absolute;
width: 30px;
height: 30px;
background-color: lime;
z-index: 4;
cursor: move;
}
.rotated {
transform: rotateZ(15deg);
}
<div class="container">
<div class="green">
</div>
<div class="lime"></div>
</div>
<div class="red"></div>
<br><br><br>
<button>rotate!</button>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
Change the position: relative to absolute of .lime.
If you don't want to rotate the '.lime' div, then remove `.addClass("rotated") on the 4th line of the script.
I currently need to make something with CSS that would look like this:
I managed to do it with this:
.top {
position: relative;
}
.top .gray-bar {
position: absolute;
width: 100%;
height: 50px;
background-color: #cdcbcc;
-ms-transform: rotate(1.2deg);
transform: rotate(1.2deg);
margin-top: -25px;
z-index: 2;
}
.top .cyan-bar {
position: absolute;
width: 100%;
height: 90px;
background-color: #2ca1ab;
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
z-index: 1;
margin-top: -30px;
margin-left: -400px;
}
.top .purple-bar {
position: absolute;
width: 100%;
height: 50px;
background-color: #b71e4c;
-ms-transform: rotate(0.7deg);
transform: rotate(0.7deg);
margin-top: -5px;
z-index: 0;
}
<div class="top">
<div class="gray-bar"></div>
<div class="cyan-bar"></div>
<div class="purple-bar"></div>
</div>
However, when I resize my window, at some point of time, the "cyan" triangle is causing issue because of the margins and the rotation. Therefore, I added some media queries to modify the rotation angle depending on the width of the screen but I feel that it's a bit "playing around" and that there is a better solution to achieve this.
I tried using borders to make the overlapping triangles but as it cannot be expressed as percentage, I'm a bit stuck. Indeed, the goal is that the result looks about the same whatever the user's screen resolution.
Is there a better solution than mine ?
Considering that the .top element uses the full viewport width, you can use viewport percentage units for the borders. This will make the triangles relative to the viewport width.
See this example with one div :
body,html{margin:0;padding:0;}
.topBar{
position:relative;
height:35px;
border-bottom:30px solid transparent;
border-right:100vw solid #B71E4C;
}
.topBar:before, .topBar:after{
content:'';
position:absolute;
top:0; left:0;
height:15px;
}
.topBar:before{
border-bottom:50px solid transparent;
border-left:100vw solid #2CA1AB;
}
.topBar:after{
border-bottom:40px solid transparent;
border-right:100vw solid #CDCBCC;
}
<div class="topBar"></div>
Maybe this help you, but, #web-tiki its the best solution, using pseudo-selectors: :before & :after
.top {
overflow: hidden;
height: 90px;
}
.top .gray-bar {
position: relative;
width: 100%;
height: 50px;
background-color:#cdcbcc;
-ms-transform: rotate(1.3deg);
transform: rotate(1.3deg);
margin-top:-35px;
z-index: 2;
}
.top .cyan-bar {
position: relative;
width: 150%;
height: 50px;
background-color:#2ca1ab;
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
z-index:1;
top: -5px;
margin-top:-30px;
margin-left:-100px;
}
.top .purple-bar {
position: relative;
width: 100%;
height: 20px;
background-color:#b71e4c;
-ms-transform: rotate(0.7deg);
transform: rotate(0.7deg);
margin-top: -20px;
z-index:0;
}
<div class="top">
<div class="gray-bar"></div>
<div class="cyan-bar"></div>
<div class="purple-bar"></div>
</div>
I have a colored div that has been rotated 45 degrees and was wondering if there is way to crop the edges of it so that it fits within a certain boundry. (eg: a 45 degree line through a square that is cut off where it touches the square)
Here is the code:
#parent {
width: 200px;
height: 200px;
border: 1px solid black;
}
#child {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.red_stripe {
width: 500px;
height: 50px;
background-color: red;
position:absolute;
}
#gap {
height:100px;
}
<div id = "parent">
<div id = "child">
<div class = "red_stripe"></div>
<div id = "gap"></div>
<div class = "red_stripe"></div>
</div>
</div>
I have recreated this in JSFIDDLE: http://jsfiddle.net/RBlair/s9qusfvv/2/
So what should happen is that the red bar should be cut off where it meets the black border on the right and along the bottom sides (I am not worried about it exceeding the boundary at the top or left, just the right side and the bottom)
Add overflow:hidden to #parent
#parent {
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
#child {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.red_stripe {
width: 500px;
height: 50px;
background-color: red;
}
#gap {
height: 100px;
}
<div id="parent">
<div id="child">
<div class="red_stripe">
</div>
<div id="gap">
</div>
<div class="red_stripe">
</div>
</div>
</div>
Let's reduce the HTML required
Pseudo element background
Use overflow: hidden, but create the lines with a ::before pseudo element and no extra HTML.
We can use:
inner box shadow to create the lines (useful as it does not take up space like a border)
position: absolute to position the :before along with a percentage height, width, left and right
position: relative on the div so that the pseudo element is positioned in relation to it
Complete Example
div {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
div::before {
content: '';
display: block;
position: absolute;
top: 0;
left: -50%;
box-shadow: inset 0 0 0 50px #F00;
height: 100%;
width: 200%;
transform: rotate(45deg);
z-index: -1;
}
<div class="box">
</div>