user3423144 user3423144 - 5 months ago 20
CSS Question

CSS to draw slant line border

I have not much experience in web designing, I was just trying to write a css
to get the out put similar to this
enter image description here

Can anyone help me to achieve this kind of header using css

Answer Source

Here is an example how it can be achieved.

.root {
  border: 1px solid gray;
  background-color: yellow;
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.slash {
  width: 200%;
  height: 200%;
  background-color: white;
  border: 5px solid gray;
  transform: rotate(45deg) translateY(100%);
}
<div class="root">
  <div class="slash"></div>
</div>

https://jsfiddle.net/0tgwa6xn/