CODEWITHSUNDEEP
css
user14335933
user14335933

Reputation:

Diagonal Line CSS

I have an image below, I am trying to create a diagonal line in CSS I need it to look like the red diagram below,

enter image description here

I also need this preferably to be 1 div is this possible? I found this example but this is showing the diagonal line within another div.

I have made this so far but its in 3 different divs.

div{
content:"";
position:absolute;
border-top:1px solid red;
  width:100px;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
}

#help{
content:"";
position:absolute;
border-top:1px solid red;
  width:180px;
  transform: rotate(0deg);
  transform-origin: 0% 0%;
margin-top:70px;
margin-left:70px;
}

#help1{
content:"";
position:absolute;
border-top:1px solid red;
  width:100px;
  transform: rotate(-45deg);
  transform-origin: 0% 0%;
margin-top:70px;
margin-left:250px;
}


<body>
  <div></div>
  <div id="help"></div>
  <div id="help1"></div>
</body>

Upvotes: 1

Views: 567

Answers (3)

Temani Afif
Temani Afif

Reputation: 272866

Using clip-path:

.box {
  --t:2px;
  --w:70px;
  height:100px;
  background:red;
  clip-path:
    polygon(0 0,
     var(--t) 0, 
     calc(        var(--w) + var(--t))  calc(100% - var(--t)),
     calc(100% - (var(--w) + var(--t))) calc(100% - var(--t)),
     calc(100% - var(--t)) 0, 
          100%             0,
     calc(100% - var(--w)) 100%,
                 var(--w)  100%);
}
<div class="box"></div>

Upvotes: 0

doğukan
doğukan

Reputation: 27399

Can be made with multiple gradients.

.a {
  --triangle-width: 100px;
  --line-width: 2px;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top right, transparent 0 calc(50% - (var(--line-width) / 2)), red calc(50% - (var(--line-width) / 2)) calc(50% + (var(--line-width) / 2)), transparent calc(50% + (var(--line-width) / 2)) 100%) 0 0 /var(--triangle-width) 100%,
              linear-gradient(to bottom right, transparent 0 calc(50% - (var(--line-width) / 2)), red calc(50% - (var(--line-width) / 2)) calc(50% + (var(--line-width) / 2)), transparent calc(50% + (var(--line-width) / 2)) 100%) 100% 0 /var(--triangle-width) 100%,
              linear-gradient(red, red) var(--triangle-width) 100% / calc(100% - (var(--triangle-width) * 2)) var(--line-width);
  background-repeat: no-repeat;
}
<div class="a"></div>

Upvotes: 2

QuinnF
QuinnF

Reputation: 2169

I think you were on the right track with the transform:rotate() property. You just need to use 3 separate divs (all enclosed in a parent div).

You just need to do a little math to figure out how long to make the div before rotating, and then rotate each one a different direction (maybe with a little offset to line them up).

:root {
  --box-height: 50px;
  --box-diagonal: 71px; /* sqrt(50^2 + 50^2) */
}

div.container {
  display: flex;
}

div.container > div {
  width:var(--box-height);
  height:var(--box-height);
  position:relative;
}

div.container > div:nth-child(2) {
  width: 100px;
}

div.container > div:after {
  content:"";
  position:absolute;
  border-top:1px solid red;
  transform-origin: 0% 0%;
  width: 100px;
  transform: translate(0, var(--box-height));
}

div.container > div:first-child:after {
  width:var(--box-diagonal);
  transform: rotate(45deg);
  
}

div.container > div:last-child:after {
  width:var(--box-diagonal);
  transform: translate(0, var(--box-height)) rotate(-45deg);
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
  <div></div>
  <div></div>
  <div></div>
  </div>
</body>
</html>

Upvotes: 0

Related Questions