Symetric Div with Background Image Without Clip-Path

symetric div with background image without clip-path

Use skew transformation:

.first,.second {  height:300px;  transform-origin:left;  overflow:hidden;}
.first {  transform:skewY(4deg);}.first > div {  height:100%;  background:url(https://picsum.photos/id/10/800/800) center/cover;  transform:skewY(-4deg);  transform-origin:left;}.second {  transform:skewY(-4deg);}.second > div {  height:100%;  background:url(https://picsum.photos/id/1045/800/800) center/cover;  transform:skewY(8deg); /* twice the skew here so you may need another skew for the content*/  transform-origin:right;}

<div class="first">  <div></div></div><div class="second">  <div></div></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;
}

5 images symmetrically seperated with diagonal lines

No need to use positioned element, you can simplify like this and use background-position to center the element:

.container {  display: flex;  height: 150px;  margin: 0 30px;}
.box {  flex: 1;  border: 1px solid;  transform: skew(-25deg);  position: relative;  overflow: hidden;}
.box:after {  content: "";  position: absolute;  top: 0;  bottom: 0;  left: -50%;  right: -50%;  transform: skew(25deg);  background-image: var(--i);  background-position: center;}

<div class="container">  <div class="box" style="--i:url(https://lorempixel.com/400/200/)"></div>  <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>  <div class="box" style="--i:url(https://lorempixel.com/300/200/)"></div>  <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>  <div class="box" style="--i:url(https://lorempixel.com/200/300/)"></div></div>

Skew Background Image on one side with a border

The trick is to correctly set the transform-orgin, the border and then it should be easy to apply both skew transformation. You may also need some negative margin to rectify some spaces.

I used CSS variables to make the code easy but it's not mandatory.

#about-gallery {  margin: 60px 0;  display: flex;  flex-wrap: wrap;  --s:-8deg; /* The skew factor (the same for all)*/}
.about-img-wrapper {  margin: 5px;  overflow: hidden; /* Don't forget this !!*/  flex-grow:1;}
.about-img-wrapper > * {  height: 300px;  background: center/cover no-repeat;  overflow: hidden; /* Don't forget this !!*/  transform:skewX(var(--s,0deg));}/* We need skewY for the 3 last element */.about-img-wrapper:nth-child(n + 3) > *  {  transform:skewY(var(--s,0deg));}/* The pseudo element will get the image and the inverse of skewing */.about-img-wrapper > *::before {  content:"";  display:block;  height:100%;  background:inherit; /* inherit the image */  transform-origin: inherit; /* inherit the same transform-origin */  transform:skewX(calc(-1*var(--s,0deg)));}.about-img-wrapper:nth-child(n + 3) > *::before  {  transform:skewY(calc(-1*var(--s,0deg)));}
/**/.image-1 {  border-left: solid 10px black;  flex-basis:50%;  margin-right:-15px;}
.image-1>* {  transform-origin: top;  border: solid 10px black;border-left: none;}/**/.image-2 {  border-right: solid 10px black;  flex-basis:40%;  margin-left:-15px;}.image-2>* {  transform-origin: bottom;  border: solid 10px black;border-right: none;}/**/.image-3 {  border-top: solid 10px black;  flex-basis:100%;}.image-3>* {  transform-origin: left;  border: solid 10px black;border-top: none;}/**/.image-4,.image-5{  border-bottom: solid 10px black;  flex-basis:40%;  margin-top:-5vw;}.image-4>*,.image-5>* {  transform-origin: right;  border: solid 10px black;border-bottom: none;}.image-5 {  margin-top:-12vw;}.image-5>* {  height:calc(300px + 7vw); /* We need a bigger height here */}/**/* {  box-sizing: border-box;}

<div id="about-gallery">  <div class="about-img-wrapper  image-1">    <div style="background-image: url(https://picsum.photos/id/10/800/800);"></div>  </div>  <div class="about-img-wrapper image-2">    <div style="background-image: url(https://picsum.photos/id/102/800/800);"></div>  </div>  <div class="about-img-wrapper  image-3">    <div style="background-image: url(https://picsum.photos/id/123/800/800);"></div>  </div>  <div class="about-img-wrapper image-4">    <div style="background-image: url(https://picsum.photos/id/14/800/800);"></div>  </div>  <div class="about-img-wrapper  image-5">    <div style="background-image: url(https://picsum.photos/id/20/800/800);"></div>  </div>
</div>

Repeat background image - no crop or make it symmetric

Even though space in background-repeat is still poorly supported, the twin property in border-image has a good support (starting in IE11)

.test {  height: 0px;  width: 182px;  margin: 5px;  border-style: solid;  border-width: 0px;  border-bottom-width: 38px;  border-image: url(https://i.stack.imgur.com/8aOpi.png) 0 0 38 0 space;}
.test:nth-child(2) {  width: 210px;}
.test:nth-child(3) {  width: 220px;}.test:nth-child(4) {  width: 250px;}

<div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div>

Centered background image within SVG

Using a pattern fill is the way to go - if your image aspect ratio is square it will work nicely. Notice the patterns width and height are the same as your rectangle. It's important in this case to set the patternUnits to userSpaceOnUse which for simplicity keeps the pattern fill from scaling to the objects bounding box.

.body {  width: 100%;  height: 100%;  background: #1f1b33;  padding: 2rem;}
svg {  width: 120px;}

<div class="body">    <svg viewBox="0 0 121.375 125.397">      <defs>        <pattern id="patt" patternUnits="userSpaceOnUse" width="97" height="97">          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/17496/flace.jpg" width="97" height="97"></image>        </pattern>      </defs>      <g        id="blank"        transform="translate(-1460.94 -927.887)"      >        <path          id="wrapper"          data-name="Caminho 2257"          d="M80.617,78.013C67.787,91.6,11.606,90.985-8.689,69.872s-20.527-73.915,0-90.659S66.834-47.3,87.13-26.188,93.447,64.424,80.617,78.013Z"          transform="translate(1484.938 966.119)"          fill="#fff"          opacity="0.2"        />        <rect          id="within"          data-name="Retângulo 365"          width="97"          height="97"          rx="37"          transform="translate(1475 945)"          fill="url(#patt)"        />      </g>    </svg></div>

How to Transform CSS only top left shapes of div

I got the answer from @JamesAllan using clip-path like this

clip-path: polygon(0 21%, 100% 2%, 100% 100%, 0% 100%);

and this web Bennettfeely help me so much to make other shapes, thank you so much.

Custom CSS shape with borders and background image

There is the workaround that we found. It will need some adjustement but look good for our need!

<a href="">
        <svg class="stroke-path" height="100%" width="100%">
            <defs>
                <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
                    <image xlink:href="http://cdn.collider.com/wp-content/uploads/super-mario-bros.jpg" x="0" y="0" width="100%" height="100%" />
                </pattern>
            </defs>
            <path id="mlp2" d="M206.5,173.1L33.3,162.5c-6.3,0-11.4-5.1-11.3-11.4c0,0,0,0,0,0L10.5,39.8c0-6.3,5.1-11.4,11.3-11.4 c0,0,0,0,0,0l208.2-17.9c6.3,0,11.4,5.1,11.3,11.4c0,0,0,0,0,0l-23.6,139.8C217.8,168,212.8,173.1,206.5,173.1 C206.5,173.1,206.5,173.1,206.5,173.1z" fill="url(#img1)" fill-opacity="1" />
        </svg>  
        <svg class="" height="100%" width="100%">
            <defs>
                <filter id="f1" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
                    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="8" />

-->

http://codepen.io/anon/pen/vXBPOz

---

Related Topics