Margin to Apply to Position Div After Skewing with CSS Transform

Margin to apply to position div after skewing with CSS transform

No need math, simply adjust transform-origin:

.parent {  border: 1px solid red;  position: relative;  margin-top: 100px;  height: 200px;}
.child {  border: 1px solid blue;  position: absolute;  width: 100%;  height: 100%;  transform: skewY(-3.5deg);  transform-origin:top right;}

<div class="parent">  <div class="child">    content  </div></div>

Skewing both top and bottom of div

With some rotation and perspective you can do it:

.box {
  margin-left: auto;
  width: 200px;
  height: 450px;
  transform-origin: right;
  transform: perspective(100px) rotateY(-10deg);
  border-radius: 40px 0 0 40px;
  overflow: hidden;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://picsum.photos/id/1074/400/800) center/cover;
  transform-origin:inherit;
  transform: perspective(100px) rotateY(10deg);
}

body {
  margin: 0;
  background:#eee;
}

<div class="box"></div>

Skewed Borders on 2 Div

All you gotta do is add transform: translateY(10%); and z-index: 999; in your .img-box class, and it should work, let me know if it doesn't !

By the way, z-index doesn't strictly gotta be 999, I put the highest number just in case that something wont get over it later on if you decide to add more things to your code, you can put z-index: 1;, it will also work, or any number higher then 0 really :)

Just replace your css with this one :

.img-box {
  background: url("https://via.placeholder.com/2560x2000/0000000") no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  min-height: 100vh;
  transform: translateY(10%);
  z-index: 999;
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}

.map-box {
  background: url("https://via.placeholder.com/2560x600/DDDDDD") no-repeat;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  position: relative;
  height: 600px;
  display-block;
}

footer{
  height:100px;
  background-color: #4D4E4C;
}

CSS skew and transform adds unwanted outline on Chrome and Edge

Adjust the position of the :after element to have an overlap and avoid this. So intead of left:100% make it left:0 and adjust the z-index:

#nav {  background-color: #183650;  overflow: hidden;}
ul {  margin: 0 auto;  width: 100%;  display: flex;  justify-content: center;  align-content: center;}
li {  padding: 9px 0;  list-style: none;}
li.last,li.first {  background: none transparent;  position: relative;}
li.last::after {  content: "";  position: absolute;  top: 0;  left: 0; /*changed this */  z-index:-1; /*Added this*/  width: 100vw;  height: 100%;  background-color: #20bef2;}
li a {  border: none;  color: #FFF;  text-transform: uppercase;  font-size: 17px;  letter-spacing: 1px;  padding: 0.75em 0.7em;}
li.last {  background-color: #20bef2;  border-left: 3px solid #FFF;}
li a {  text-decoration: none;}
li a:hover {  background: none transparent;}
li:last-child {  background-color: #20bef2;  transform: translateZ(1px) skew(-15deg);  backface-visibility: hidden;  -webkit-backface-visibility: hidden;}
li:last-child a {  transform: translateZ(1px) skew(15deg);  backface-visibility: hidden;  -webkit-backface-visibility: hidden;}

<div id="nav">  <ul>    <li class="first"><a href="#">Item</a></li>    <li><a href="#">Item</a></li>    <li class="last"><a href="#">Item</a></li>  </ul></div>

Css shape transition - bottom left

div {  float: left;  height: 100px;  width: 200px;  margin: 50px;  color: beige;  transition: all 1s;}.skew {  padding: 10px;  position: relative;  background: tomato;}.skew:after {  position: absolute;  content: '';  background: inherit;  z-index: -1;}.skew.bottom:after {  width: 100%;  height: 80%;}.skew.bottom:after {  top: 0px; /*CHANGED THIS*/  left: 0px;  transform-origin: top left;  transform: skewY(-22deg);/*CHANGED THIS*/}.skew.bottom {  margin-top: 100px; /*INCREASED THIS*/}

<div class="skew bottom">Some content</div>

How to make a dive slightly tilt in transform skew

.footer-bottom:before{background-color: #000; position:absolute; top:-50px; left:0px; content:""; width:100%;min-height: 80px;-ms-transform: skew(0deg,2deg); /* IE 9 */-webkit-transform: skew(0deg,2deg); /* Safari */transform: skew(0deg,2deg); /* Standard syntax */} .footer-bottom { position:relative; padding-top:50px; margin-top:80px;
background-color: #000;min-height: 140px;
}
.copyright {
color: #fff;font-family: calibri;font-size: 16px;}

<div class="row footer-bottom">        <div class="container">            <div class="copyright">            <p class="text-center copy-text">Copyright © 2017 Brown Box Ninja. All rights Reserved</p>            </div>        </div>    </div>

Entire body tag skewing to the left on mobile, other elements not affected

SOLVED:

There were elements in the code that were forcing the layout be too wide.

The first problem was the 'hr' tag in the clinical work div.

Also the margins on the hero text were not responsive.

Solution:

Adding in responsive sizing to the hr tag in CSS.

Set the width of the hero__text to a percentage of the screen and then center it horizontally with transform:translate.

transform: translate(-50%);
margin-left: 50%; 

---

Related Topics