Question 298023 in Html Question posted in
Some basic documentation can be found here.

Html – A rotated line through the whole screen

I want to have a slightly rotated line separating my site content, But when I try to rotate the <hr> line, it never ends properly, leaving ugly gaps.

How could I get lines that go through the whole screen?

.dividingline {
  transform: rotate(-5deg);
  overflow: hidden;
}
<div class="dividingline">
  <hr style="margin-top: 50px; margin-bottom: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #e82010; border-radius: 24px; background-color:#e82010; height:30px">
  <hr style="margin-bottom: 0px; margin-top: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #fe5b20; border-radius: 24px; background-color:#fe5b20; height:30px">
  <hr style="margin-bottom: 50px; margin-top: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #f26c8f; border-radius: 24px; background-color:#f26c8f; height:30px">
</div>
Tags:

2

Answers


  1. 0 
    .dividinglineContainer {
  overflow-x: hidden;
  /* height: 400px; */
  min-height: 260px;
}

.dividinglineContainer::-webkit-scrollbar {
  display: none;
}

.dividingline {
  transform: rotate(-5deg) scaleX(2);
  overflow: hidden;
  position: relative;
  top: 35px;
}
    <div class="dividinglineContainer">
  <div class="dividingline">
    <hr style="margin-top: 50px; margin-bottom: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #e82010; border-radius: 24px; background-color:#e82010; height:30px">
    <hr style="margin-bottom: 0px; margin-top: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #fe5b20; border-radius: 24px; background-color:#fe5b20; height:30px">
    <hr style="margin-bottom: 50px; margin-top: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #f26c8f; border-radius: 24px; background-color:#f26c8f; height:30px">
  </div>
</div>

    How about this?

    Login or Signup to reply.
  2. 0

    Use vw units (less than 100) so that once rotated the element does not overflow and then remove the positioning.

    This is now responsive and I’ve centered it as well.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.dividingline {
  transform: rotate(-5deg);
  overflow: hidden;
}

hr {
  margin: 0px;
  width: 98vw;
  position: relative;
  border-width: 10px;
  border-style: solid;
  border-radius: 24px;
  height: 30px;
}

hr:nth-of-type(1) {
  border-color: #e82010;
  background-color: #e82010;
}

hr:nth-of-type(2) {
  border-color: #fe5b20;
  background-color: #fe5b20;
}

hr:nth-of-type(3) {
  border-color: #f26c8f;
  background-color: #f26c8f;
}
    <div class="dividingline">
  <hr>
  <hr>
  <hr>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search