'CSS to draw slant line border [duplicate]

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

htmlcss


Solution 1:[1]

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/

Solution 2:[2]

Have you tried transform: skewX() It skews the object to some degree. I like using transform in css because I can manipulate the div how I like it, it take some time to get used to it and how it works but you should play around with it see if it works for you. Here is more information on Transform: https://www.w3schools.com/cssref/css3_pr_transform.asp

and I made an example here: https://jsfiddle.net/4r3mqctp/1/

Hopefully this helps

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 hungerstar
Solution 2 jesus.agustin

Related Questions