9

For a website I'm developing I need to include some diagonal shaped borders to a div. These are the main examples which I need to recreate.

double diagonal top border, triangle shaped

Now been scouting the web on how to achieve this, and my first thought as well would be by using ::before. However I can't get it to work without it being positioned absolute which messes up the entire page.

This is my code I have tried to achieve something like this:

.slider-container{
  background-color: $blue;
  width: 100%;
  overflow: hidden;
  position: relative;
  .col-md-3{
    img{
      padding: 40px;
      width: 100%;
      max-width: 400px;
      margin: auto;
    }
  }
  &::before {
    background: red;
    bottom: 100%;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    transform-origin: 100% 100%;
    transform: rotate(-15deg);
    width: 150%;
  }
}
<section id="slider">
    <div class="container-fluid">
        <div class="row slider-container">
            <div class="col-md-3">
                <p>imgae 1</p>
            </div>
            <div class="col-md-3">
                <p>imgae 2</p>
            </div>
            <div class="col-md-3">
                <p>imgae 3</p>
            </div>
            <div class="col-md-3">
                <p>imgae 4</p>
            </div>
        </div>
    </div>
</section>

Note: it won't work in here but this is the result I get result

krlzlx
  • 5,752
  • 14
  • 47
  • 55
Gurbii
  • 245
  • 2
  • 5
  • 15

6 Answers6

6

With just css and a bit tweaking based on your divs size you could create something like this:

.myclass {
width: 100px;
height: 100px;
background: linear-gradient(45deg, black 0%, black 26%, transparent 26%), linear-gradient(-45deg, black 0%, black 27%, transparent 27%)
}

.myclass2 {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, blue 0%, blue 27%, transparent 27%), linear-gradient(45deg, blue 0%, blue 26%, red 26%)
}
With transparency:
<div class="myclass">My content here</div>
<br/>
Not as easy with transparent:
<div class="myclass2">My content here</div>

Edit: Just tested this in chrome, you might need special linear-gradients for older/other browsers.

Morfium
  • 241
  • 4
  • 7
  • Nevermind, fiddled around with the height and some other properties and it is what i'm looking for thanks! – Gurbii May 03 '17 at 11:23
  • I suggest using "to bottom left" and "to bottom right" for the linear gradients instead of an angle. This way it will adjust the diagonality(?) to the height of the container. – MiK Oct 17 '19 at 10:18
4

The most simple way to achieve this would probably be to use a background image, though the effect may prove to be inconsistent on smaller devices. For this reason, you may want to consider using a hard-stop gradient.

.grad {
  background: lightblue; /* For browsers that don't support gradients */
  background: -webkit-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: -o-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: -moz-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  width: 100%;
  padding: 20px;
}
<div class="grad">
  <h1>Hard-stop gradient</h1>
  <p>Using this type of gradient, you can create an angled background without using a background image.</p>
</div>

Using this, you can create a gradient from 0% to 15% that is white on both ends, followed by a gradient from 15% to 100% that's fully black. This completely removes the fading effect, giving you your angled background. It's probably the most efficient way as well since it only requires one line of CSS.

natejms
  • 699
  • 4
  • 7
2

Something like this?

div {
  background: yellow;
  height: 150px;
  overflow: hidden;
  position: relative;
  width: 300px;
}

div::before {
  background: red;
  bottom: 100%;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  transform-origin: 100% 100%;
  transform: rotate(-15deg);
  width: 150%;
}
<div></div>
Ruslan
  • 1,293
  • 17
  • 28
  • indeed something like this, however when this div follows another it will not be cut off on the top like your example because its outside of the viewport – Gurbii May 03 '17 at 10:51
2

You can use clip-path.

body {
  margin: 0;
  padding: 0;

  color: #ffffff;
}

.wrapper {
  min-height: 100vh;
  min-width: 100vw;
  max-width: 100vw;
  width: 100vw;
  background-color: red;
}

.bg {
  min-height: 100vh;
  min-width: 100vw;
  background-color: blue;
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 50% 100%);
}
<div class="wrapper">
  <div class="bg"></div>
</div>
İlknur Ültanır
  • 27
  • 1
  • 3
1

For me, the linear-gradient is not smooth ... I would suggest either clip-path or svg:

svg {
  display: block;
  width: 100%;
  height: 55px;      
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
  <polygon points="100 0 100 10 0 10" fill="white" />
</svg>
Ricky Levi
  • 7,298
  • 1
  • 57
  • 65
0
.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid green;
  border-bottom: 60px solid transparent;

  border-left: 60px solid green;
}
Alberto Martínez
  • 249
  • 2
  • 14
  • i've seen this anwser on a similar question however it only seems to focus on the diagonal side div and not the div which has these like triangles on both side. Also i can't seem to figure it out completely – Gurbii May 03 '17 at 10:57
  • gives me a weird shape with downshaped border on the left side of my div? – Gurbii May 03 '17 at 11:13