Div with diagonal bottom border

Question

How can I make a div with diagonal bottom and with border?
I know that I can use clip-path, but by this way I can't make a border (example: https://jsfiddle.net/s976/qopxf6mj/4/)

I saw "Creating a diagonal line/section/border with CSS" but it's not about enabling css border for diagonal container.

show us your try, even the one with clip-path where you are missing the border — Temani Afif, Oct 10 '19 at 10:01
Possible duplicate of [Creating a diagonal line/section/border with CSS](https://stackoverflow.com/questions/29015781/creating-a-diagonal-line-section-border-with-css) — cloned, Oct 10 '19 at 10:01
Just separate the two sections with a gap and use the background of the container as a "border". — Paulie_D, Oct 10 '19 at 10:08
there is not really an update. and you can [totally add borders to SVG](https://stackoverflow.com/questions/14751178/adding-border-to-svg-image) — cloned, Oct 10 '19 at 10:19

Temani Afif · Accepted Answer · 2019-10-10T10:26:21.563

You can try the use of skew transformation like below:

.container {
  width: 300px;
  height: 200px;
  background: url(https://picsum.photos/id/1002/800/800) center/cover;
  overflow: hidden;
}

.box {
  height: 70%;
  border-bottom: 10px solid red;
  transform: skewY(-15deg);
  transform-origin: left;
  position: relative;
  overflow: hidden;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://picsum.photos/id/12/800/800) center/cover;
  transform: skewY(15deg);
  transform-origin: left;
}

<div class="container">
  <div class="box">

  </div>
</div>

Or clip-path combined with some gradient like below:

.container {
  width: 300px;
  height: 200px;
  background: url(https://picsum.photos/id/1002/800/800) center/cover;
}

.box {
  height: 70%;
  border-bottom: 10px solid red;
  background: 
    linear-gradient(to bottom right,transparent 49.5%,red 50%) bottom/100% 80px no-repeat,
    url(https://picsum.photos/id/12/800/800) center/cover;
  clip-path:polygon(0 0,100% 0, 100% calc(100% - 80px),0 100%)
}

<div class="container">
  <div class="box">

  </div>
</div>

You can optimze the last code to use only one element and some variables

.container {
  width: 300px;
  height: 200px;
  background: url(https://picsum.photos/id/1002/800/800) center/cover;
  --angle:80px;     /* Control the angle*/
  --thickness:10px; /* Control the thickness of the line */
}

.container:before{
  content:"";
  display:block;
  height: 70%;
  border-bottom: var(--thickness) solid red;
  background: 
    linear-gradient(to bottom right,transparent 49.2%,red 50%) bottom/100% var(--angle) no-repeat,
    url(https://picsum.photos/id/12/800/800) center/cover;
  clip-path:polygon(0 0,100% 0, 100% calc(100% - var(--angle)),0 100%)
}

<div class="container">

</div>

<div class="container" style="--angle:40px;--thickness:5px">

</div>

score 1 · Answer 2 · answered Oct 10 '19 at 10:40

You can use the clip-path property and manipulate its size.

Try This:-

.right {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 23%, 0 83%);
  clip-path: polygon(0 0, 100% 0%, 100% 23%, 0 83%);
}

.left {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(0 75%, 100% 22%, 100% 100%, 0 100%);
  clip-path: polygon(0 75%, 100% 22%, 100% 100%, 0 100%);
}

border {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 300px;
  background-color: black;
  -webkit-clip-path:polygon(0 75%, 100% 22%, 100% 28%, 0 83%);
  clip-path: polygon(0 75%, 100% 22%, 100% 28%, 0 83%);
}

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<img class="left" src="https://picsum.photos/400/300?random">
<img class="right" src="https://picsum.photos/400/300">
  <border />

</body>
</html>

score 0 · Answer 3 · answered Oct 10 '19 at 10:17

Well i have an idea for you you can do it with skewY:

<div class="div1"><div class="content"></div></div>
<div class="div2"><div class="content"></div></div>

div1 {
   transform: skewY(-10deg)
}

div2 {
   transform: skewY(-10deg)
}

After that your content will be also skewed with -10 deg so you need to skew it the other way around:

.content {
   transform: skewY(10deg)
}

Div with diagonal bottom border

3 Answers3