Home > other >  How can I rotate these texts via CSS?
How can I rotate these texts via CSS?

Time：10-24

.sakktabla {
  border-spacing: 0;
  border-collapse: collapse;
  margin: 20px;
}

.sakktabla th {
  padding: .5em;
  text-align: center;
}

.sakktabla td {
  border: 1px solid;
  width: 2em;
  height: 2em;
  text-align: center;
}

.sakktabla .vilagos {
  display: table-cell;
  background: #ede4df;
  width: 60px;
  height: 60px;
  font-size: 30px;
  max-width: 60px;
  max-height: 60px;
  text-align: center;
  vertical-align: middle;
  -webkit-text-stroke: 1px #180f0a;
}

.sakktabla .sotet {
  display: table-cell;
  background: #180f0a;
  width: 60px;
  height: 60px;
  font-size: 30px;
  max-width: 60px;
  max-height: 60px;
  text-align: center;
  vertical-align: middle;
  -webkit-text-stroke: 1px #ede4df;
}

.sakktabla .barna1 {
  background: #41210a;
  width: 54px;
  height: 54px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
}

.sakktabla .barna2 {
  background: #41210a;
  width: 54px;
  height: 54px;
  max-height: 60px;
  max-width: 60px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-bottom: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
  transform: rotate(180deg)
}

.sakktabla .barna3 {
  background: #41210a;
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-right: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
}

.sakktabla .barna4 {
  background: #41210a;
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-right: 8px solid #ae845e;
}

.sakktabla .barna5 {
  background: #41210a;
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-bottom: 8px solid #ae845e;
}

.sakktabla .barna6 {
  background: #41210a;
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-right: 8px solid #ae845e;
  border-bottom: 8px solid #ae845e;
}
<table class="sakktabla">
  <tr>
    <th class="barna1"></th>
    <th class="barna2">H</th>
    <th class="barna2">G</th>
    <th class="barna2">F</th>
    <th class="barna2">E</th>
    <th class="barna2">D</th>
    <th class="barna2">C</th>
    <th class="barna2">B</th>
    <th class="barna2">A</th>
    <th class="barna3"></th>
  </tr>
  <tr>
    <th class="barna4">8</th>
    <th class="sotet">&#9820</th>
    <th class="vilagos">&#9822</th>
    <th class="sotet">&#9821</th>
    <th class="vilagos">&#9819</th>
    <th class="sotet">&#9818</th>
    <th class="vilagos">&#9821</th>
    <th class="sotet">&#9822</th>
    <th class="vilagos">&#9820</th>
    <th class="barna4">1</th>
  </tr>
  <tr>
    <th class="barna4">7</th>
    <th class="vilagos">♟</th>
    <th class="sotet">♟</th>
    <th class="vilagos">♟</th>
    <th class="sotet">♟</th>
    <th class="vilagos">♟</th>
    <th class="sotet">♟</th>
    <th class="vilagos">♟</th>
    <th class="sotet">♟</th>
    <th class="barna4">2</th>
  </tr>
  <tr>
    <th class="barna4">6</th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="barna4">3</th>
  </tr>
  <tr>
    <th class="barna4">5</th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="barna4">4</th>
  </tr>
  <tr>
    <th class="barna4">4</th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="barna4">5</th>
  </tr>
  <tr>
    <th class="barna4">3</th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="barna4">6</th>
  </tr>
  <tr>
    <th class="barna4">2</th>
    <th class="sotet">♙</th>
    <th class="vilagos">♙</th>
    <th class="sotet">♙</th>
    <th class="vilagos">♙</th>
    <th class="sotet">♙</th>
    <th class="vilagos">♙</th>
    <th class="sotet">♙</th>
    <th class="vilagos">♙</th>
    <th class="barna4">7</th>
  </tr>
  <tr>
    <th class="barna4">1</th>
    <th class="vilagos">&#9814</th>
    <th class="sotet">&#9816</th>
    <th class="vilagos">&#9815</th>
    <th class="sotet">&#9813</th>
    <th class="vilagos">&#9812</th>
    <th class="sotet">&#9815</th>
    <th class="vilagos">&#9816</th>
    <th class="sotet">&#9814</th>
    <th class="barna4">8</th>
  </tr>
  <tr>
    <th class="barna5"></th>
    <th class="barna2">A</th>
    <th class="barna2">B</th>
    <th class="barna2">C</th>
    <th class="barna2">D</th>
    <th class="barna2" h>E</th>
    <th class="barna2">F</th>
    <th class="barna2">G</th>
    <th class="barna2">H</th>
    <th class="barna6"></th>
  </tr>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I would like to rotate the top line LETTERS (just ignore the bottom ones atm) but when I do, the border gets messed up. The letter can be found in class .barna2
Also wanna make sure that the browser support is on point so I really wanna use thing which are not supported.

Ignore my mistakes pls, its my first year at uni.

CodePudding user response：

EDIT:

.sakktabla {
  border-spacing: 0;
  border-collapse: collapse;
  margin: 20px;
}

.sakktabla th {
  padding: .5em;
  text-align: center;
}

.sakktabla td {
  border: 1px solid;
  width: 2em;
  height: 2em;
  text-align: center;
}

.sakktabla .vilagos {
  display: table-cell;
  background: #ede4df;
  width: 60px;
  height: 60px;
  font-size: 30px;
  max-width: 60px;
  max-height: 60px;
  text-align: center;
  vertical-align: middle;
  -webkit-text-stroke: 1px #180f0a;
}

.sakktabla .sotet {
  display: table-cell;
  background: #180f0a;
  width: 60px;
  height: 60px;
  font-size: 30px;
  max-width: 60px;
  max-height: 60px;
  text-align: center;
  vertical-align: middle;
  -webkit-text-stroke: 1px #ede4df;
}

.sakktabla .barna1 {
  width: 54px;
  height: 54px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
}

.sakktabla .barna2 {
  width: 54px;
  height: 54px;
  max-height: 60px;
  max-width: 60px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-bottom: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
  transform: rotate(180deg)
}

.sakktabla .barna3 {
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-right: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
}

.sakktabla .barna4 {
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-right: 8px solid #ae845e;
}

.sakktabla .barna5 {
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-bottom: 8px solid #ae845e;
}

.sakktabla .barna6 {
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-right: 8px solid #ae845e;
  border-bottom: 8px solid #ae845e;
}

.sakktabla tr{
  background: #41210a;
}

.sakktabla tr:nth-child(10) .barna2 {
  transform: rotate(0deg)
}
<table class="sakktabla">
  <tr>
    <th class="barna1"></th>
    <th class="barna2">H</th>
    <th class="barna2">G</th>
    <th class="barna2">F</th>
    <th class="barna2">E</th>
    <th class="barna2">D</th>
    <th class="barna2">C</th>
    <th class="barna2">B</th>
    <th class="barna2">A</th>
    <th class="barna3"></th>
  </tr>
  <tr>
    <th class="barna4">8</th>
    <th class="sotet">&#9820</th>
    <th class="vilagos">&#9822</th>
    <th class="sotet">&#9821</th>
    <th class="vilagos">&#9819</th>
    <th class="sotet">&#9818</th>
    <th class="vilagos">&#9821</th>
    <th class="sotet">&#9822</th>
    <th class="vilagos">&#9820</th>
    <th class="barna4">1</th>
  </tr>
  <tr>
    <th class="barna4">7</th>
    <th class="vilagos">♟</th>
    <th class="sotet">♟</th>
    <th class="vilagos">♟</th>
    <th class="sotet">♟</th>
    <th class="vilagos">♟</th>
    <th class="sotet">♟</th>
    <th class="vilagos">♟</th>
    <th class="sotet">♟</th>
    <th class="barna4">2</th>
  </tr>
  <tr>
    <th class="barna4">6</th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="barna4">3</th>
  </tr>
  <tr>
    <th class="barna4">5</th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="barna4">4</th>
  </tr>
  <tr>
    <th class="barna4">4</th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="barna4">5</th>
  </tr>
  <tr>
    <th class="barna4">3</th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="barna4">6</th>
  </tr>
  <tr>
    <th class="barna4">2</th>
    <th class="sotet">♙</th>
    <th class="vilagos">♙</th>
    <th class="sotet">♙</th>
    <th class="vilagos">♙</th>
    <th class="sotet">♙</th>
    <th class="vilagos">♙</th>
    <th class="sotet">♙</th>
    <th class="vilagos">♙</th>
    <th class="barna4">7</th>
  </tr>
  <tr>
    <th class="barna4">1</th>
    <th class="vilagos">&#9814</th>
    <th class="sotet">&#9816</th>
    <th class="vilagos">&#9815</th>
    <th class="sotet">&#9813</th>
    <th class="vilagos">&#9812</th>
    <th class="sotet">&#9815</th>
    <th class="vilagos">&#9816</th>
    <th class="sotet">&#9814</th>
    <th class="barna4">8</th>
  </tr>
  <tr>
    <th class="barna5"></th>
    <th class="barna2">A</th>
    <th class="barna2">B</th>
    <th class="barna2">C</th>
    <th class="barna2">D</th>
    <th class="barna2" h>E</th>
    <th class="barna2">F</th>
    <th class="barna2">G</th>
    <th class="barna2">H</th>
    <th class="barna6"></th>
  </tr>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

so the borders you are seeing is just a weird gap between the tiles when you rescale. what you can do is add a background color to the table row () instead of each individual item. that will fix the borders.

Now for the letters you can just select the first child of .sakktabla tr and transform rotate this one back to 0deg. or reverse it and only apply the rotation to the last child.

adding these two classes to your css will fix your problems

.sakktabla tr:first-child .barna2 { transform: rotate(0deg) }
           
.sakktabla tr:first-child, .sakktabla tr:last-child {
    background-color: #41210a;
}

Page link：https//www.codepudding.com/other/164830.html

Prev:How to read and upload image to AWS S3 with Nodejs
Next:How to stop a child div expanding to fit the width of its parent in Flexbox with Tailwind
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding