CSS to draw slant line border

Question

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

What have you tried so far? Where's you code? https://stackoverflow.com/help/mcve — disinfor, Jun 20 '17 at 18:34
so many questions already asked the same.. please use google — vsync, Jun 20 '17 at 18:57

score 1 · Answer 1 · answered Jun 20 '17 at 18:52

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

score -1 · Accepted Answer · edited Jun 20 '17 at 18:58

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

edited Jun 20 '17 at 18:58

hungerstar

21,206
6
50
59

answered Jun 20 '17 at 18:33

Artsiom Miksiuk

3,896
9
33
49

It's not generic at all. OP provided an example of what they're trying to achieve. Which is a skewed border. Should they have included some code, i.e. what they've attempted so far, yes. – hungerstar Jun 20 '17 at 18:34
Thanks for your reply, I need to draw something similar to the attached image. I am very new to css so if you can help me to write the css to get the style just like in the image – Pawan Kumar Prasad Jun 20 '17 at 18:36
@user3423144, I've updated my answer, so you can check out one of the solution. – Artsiom Miksiuk Jun 20 '17 at 18:50
@hungerstar, Got my mistake. Updated my answer. – Artsiom Miksiuk Jun 20 '17 at 18:50
Thank you so much, seem like i got what i was looking for. – Pawan Kumar Prasad Jun 20 '17 at 18:51

CSS to draw slant line border

2 Answers2