CSS to draw slant line border [duplicate]

383
June 21, 2017, at 03:20 AM

This question already has an answer here:

  • Create a slanted edge to a div 3 answers

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

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

Answer 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/

Answer 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

Rent Charter Buses Company
READ ALSO
How to test CSS direction: auto as an english speaker

How to test CSS direction: auto as an english speaker

I see that I can apply attribute direction: rtl to force right to left alignment:

353
How to center a col-xs-12 in bootstrap?

How to center a col-xs-12 in bootstrap?

I am having trouble centering the columns on bootstrap when the screen is sm or xs

706
JavaFX + SpringBoot, cant load css

JavaFX + SpringBoot, cant load css

i need a help understanding what is happening in my project, anyways i have javafx with springboot:

459