How to add lines besides a vertical text?

user_14575873 0
Viewed 167

Do I have to create a new wrapper for the borderlines? I tried to add the borderlines inside the text property but I cannot align it correctly.[![enter image description here][1]][1]

sass border css html
2 Answers

You can achieve this layout by doing the following:

Transform the element you want to. Then mess around with the margins / padding of everything, since the vertical element is transformed and it gets taken outside of the normal flow of the document.

Give the vertical element a border-bottom (since the "vertical" border is really this elements bottom side).

main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: DarkOrchid;
  color: white;
  font-family: sans-serif;
}

p {
  margin: 0; 
}

.wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 600px;
}

.vert {
  display: flex;
  transform: rotate(-90deg);
  border-bottom: 2px solid white;
  padding-left: 3rem;
}

.vert p {
  padding-bottom: 1rem;
}

.items {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: -3.25rem;
  margin-top: -3rem;
}

.items p {
  padding-left: 1rem;
}

.item-top p {
  padding-bottom: 1rem;
}

.item-bottom {
  border-top: 2px solid white;
}

.item-bottom p {
  padding-top: 1rem;
  font-size: 18px;
}
<main>
  <div class="wrapper">
    <div class="vert">
    <p>June 7, 1941</p>
  </div>
  <div class="items">
    <div class="item item-top">
      <p>Short text</p>
    </div>
    <div class="item item-bottom">
    <p>Some text that will appear on the bottom.</p>
    <p>You can put whatever you want here.</p>
    </div>
  </div>
  </div>
</main>

user_108073700

I think there are some ways. You can do like this

-html

<div class="grid-container">
 
  <div class="date">22.Jun.2020</div>
  <div class="a">what you want to write1</div>  
  <div class="b">what you want to write2</div>
</div>

-css

.date {
grid-area: date;
writing-mode: vertical-lr;
text-align: right;
 }
.a { grid-area: a; 
    border-bottom:solid 1px black;
    border-left:solid 1px black;
}

.b { 
    grid-area: b;
    border-left:solid 1px black;
}

.grid-container {
  display: grid;
  grid-template-areas:
  'date a a a a a a a a a a a'
  'date b b b b b b b b b b b';
}
user_148554880
Related