Cutting Image Diagonally with CSS

Cutting image diagonally with CSS

Use CSS3 -clip-path and polygon like this. You can specify whatever path you want to.

img {  width: 100px;  height: 100px;  -webkit-clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);  clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);}

<img src="https://picsum.photos/id/0/100/100">

Cutting a div with a background image diagonally

The code in this example only works in "modern" browsers, but if you add browser prefixes I believe can work back to IE9. It uses a rotated div as the "cut", but puts that div in an overflow: hidden container so that you don't get the whitespace you were talking about.

.wrapper {  background: url(http://placehold.it/400/400/);  width: 400px;  height: 400px;  overflow: hidden;  border: 10px solid black;  position: relative;}
.cut {  background: #fff;  position:absolute;  top: 300px;  left: -50px;  width: 500px;  height: 300px;  transform-origin: center top;  transform: rotate(8deg);}

<div class="wrapper">  <div class="cut">  </div></div>

Diagonal cut images with offset, working on all screen sizes

simplify your clip-path and control the background-position to create the top and bottom spaces:

.box {
  display: flex;
  height: 400px;
}

.box>div {
  flex: 1;
}

.box>div:first-child {
  margin-right: -10vw;
  background: url(https://picsum.photos/id/1018/800/800) top 50px center /cover no-repeat;
  clip-path: polygon(0 0, 100% 0, calc(100% - 20vw - 5px) 100%, 0 100%);
}

.box>div:last-child {
  margin-left: -10vw;
  background: url(https://picsum.photos/id/125/800/800) bottom 50px center /cover no-repeat;
  clip-path: polygon(calc(20vw + 5px) 0, 100% 0, 100% 100%, 0 100%);
}

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

How to divide image and text with diagonal line in html?

You could use the property shape-outside along with clip-path to achieve this result.

body,h2 {  margin: 0;}.main {  height: 100vh;}.img-container {  width: 70%;  height: 100%;  background-color: lightgray;  float: right;  background: url(http://fillmurray.com/1000/1000) no-repeat center center / cover;  -webkit-shape-outside: polygon(25% 0, 100% 0, 100% 100%, 0 100%);  shape-outside: polygon(25% 0, 100% 0, 100% 100%, 0 100%);  -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);}

<div class="main">  <div class="img-container"></div>  <h2>Title</h2>  <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque orci id elit mollis luctus. Integer tincidunt euismod lectus sodales convallis. Pellentesque bibendum libero turpis, ac hendrerit ante maximus et. Cras interdum tortor id metus    hendrerit volutpat.  </p></div>

cut a div diagonally using css

Use border colors to display a diagonally cut div.

Combine it with ::after to use only one div.

.background {  background-color: #5555AA;  padding-top: 15px;}.content {  position: relative;  background-color: white;  height: 30px;  line-height: 30px;  padding: 0 100px 0 200px;  display:inline-block;}.content::after {  position: absolute;  right: -50px;  content: "";  border-bottom: 25px solid white;  border-left: 25px solid white;  border-top: 25px solid transparent;  border-right: 25px solid transparent;}

<div class="background">  <div class="content">KONTAKT</div></div>

Cutting background color diagonally with CSS

Use a linear-gradient starting with transparent as the first color-stop

.item {  color: #fff;  font-size: 30px;  background: linear-gradient(225deg, transparent 0, transparent 50px, #565453 0, #565453 100%);  padding: 10px 10px 10px 10px;  width: 52%;  text-align: center;  display: inline-block;}

<div class="item">New Music</div>

How to crop image diagonally in canvas

You have a few options:

• Rotate the base image so that the clip rect is aligned horizontally and vertically. Then use ctx.rect to define the clip region.

• Use CSS clipping per @peter-b's answer

• Clip as a polygonal path

  • Similar answer on SO: canvas- Cropping images in different shapes

The third option is probably easiest, but it maybe depends on what you intend to do with the image once cropped. i.e. Do you intend to rotate it?

Here is working snippet using your image and similar code:

const originalImg = new Image()originalImg.onload = () => {
  const srcCanvas = document.getElementById('srcCanvas')  const srcCtx = srcCanvas.getContext('2d')
  // Calculate rect coordinates.  // These are hardcoded approximations for this snippet:  let srcA = [172, 0]  let srcB = [originalImg.width, originalImg.height / 4 * 3 - 50]  let srcC = [465, originalImg.height]  let srcD = [0, originalImg.height / 3]
  srcCtx.moveTo(...srcA)  srcCtx.beginPath()  srcCtx.lineTo(...srcB)  srcCtx.lineTo(...srcC)  srcCtx.lineTo(...srcD)  srcCtx.lineTo(...srcA)  srcCtx.closePath()
  srcCtx.clip()
  srcCtx.drawImage(originalImg, 0, 0)};originalImg.src = 'https://i.stack.imgur.com/15BPX.png'

<div style="margin-bottom:5rem">
  <h4>Clipped</h4>  <canvas id="srcCanvas" width="637" height="600" />
</div>

Diagonally split/combine div/image with CSS

CSS Only

Pure CSS solution using the clip-path property. Browser support is pretty bad though.

.split-image-container{    height: 300px;    width: 300px;    position: relative;}
img{  width:100%;  height:100%;  position:absolute;}
.clip{  -webkit-clip-path: polygon(100% 0%, 0% 100%, 100% 100%);  clip-path: polygon(100% 0%, 0% 100%, 100% 100%);}

<div class="split-image-container">    <img src="https://merkd.com/usr/members/icons/thumb.php?src=1435366066.9.png&w=300" alt="Just Another Clan" title="Just Another Clan"/>    <img src="https://merkd.com/usr/teams/icons/thumb.php?src=1441676463.1.jpg&w=300" alt="ExtraordinaryKillers" title="ExtraordinaryKillers" class="clip"/></div>

---

Related Topics