How to add that slant line?

Question

I would like to add that line in border property, not create new div. Is it possible?

https://i.stack.imgur.com/9SsYo.png

Answer 1

You can use CSS3 transform style to do that. You can use jQuery aswell: How to rotate a div using jQuery

If you choose to use CSS3 transform style, you need to set border of your div and rotate it. If you have something (image, text, etc) in your div, it will rotate with the div, so you need to un-rotate them using the same method.

If this doesn't help you, paste your code in jsFiddle and it will be way easier to help you. Good luck.

Answer 2

Not sure, but if you are looking to clip:

-webkit-clip-path: polygon(28% 0, 100% 0, 100% 81%, 74% 100%, 0 100%, 0 19%);
clip-path: polygon(28% 0, 100% 0, 100% 81%, 74% 100%, 0 100%, 0 19%);

Answer 3

You can use css pseudo classes to do this.

https://jsfiddle.net/L87jf1d8/2/

Use :before and :after to the box class

<div class="box">
Name
</div>

Css:

.box{
  padding:30px;
  text-align:center;
  width:200px;
  border:1px solid #000;
}
.box:after,.box:before{
    content: " ";
    width: 55px;
    height: 1px;
    transform: rotate(-45deg);
    background: #000;
    position: absolute;
}
.box:after{
   margin-left: 64px;
   margin-top: 29px;
}
.box:before{
  margin-left: -120px;
  margin-top: -12px;
}

Answer 4

Define a slant class like the following and apply it to any div regardless of its size:

Note that you should also set overflow: hidden; on main element;

.box1, .box2, .box3 {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
  overflow: hidden;
  margin-top: 10px;
}

.box2 {
  width: 200px;
}

.box3 {
  width: 300px;
}

.slant:before, .slant:after {
  content: '';
  border: 1px solid tomato;
  display: inline-block;
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
  position: relative;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
}

.slant:after {
  transform: translate3d(-150%, -50%, 0) rotate(45deg);
  top: 100%;
  left: 100%;
}

<div class="box1 slant"></div>
<div class="box2 slant"></div>
<div class="box3 slant"></div>