How to triangle top and bottom border?

Question

As you can see in the image below, I am trying to warp or triangle my div from bottom and top, but I have no idea how to do it. I just tried a couple of times to do it, but

Answer 1

This can be done using CSS triangles on the ::before and ::after pseudo-elements! I've colored them brightly so you can tell what's happening, but it should be somewhat easy to get these to look they way you want.

body {
  background: lightblue;
}

.block {
  background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
  border: 1px solid #fff;
  width: 300px;
  height: 150px;
  margin: 30px;
  position: relative;
}

.block::before,
.block::after{
  display: block;
  content: '';
  position: absolute;
  border: 150px solid transparent;
}

.block::before {
  border-top-width: 0;
  border-bottom-width: 25px;
  border-bottom-color: red;
  top: -25px;
}

.block::after {
  border-bottom-width: 0;
  border-top-width: 25px;
  border-top-color: green;
  bottom: -25px;
}