Is there a simple way to caddy corner text in css?

Is there a simple way to caddy corner text in css?


Is there a method that works that automatically does it perfectly?

How do you set this code up without a set height? I only put a set height cause I was getting confused.

Adding in the caddy cornered text confused me.

Code:

<style type="text/css"> 

.outer {
  max-width: 808px; /*820 */
height: 302px;
  border: 6px solid #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 89px;
  font-family: georgia;
  text-align: center;
  border-bottom: 6px solid #38761d;
  padding-bottom: 24px;
  margin-top: 3px;
  margin-bottom: 0;
}

.hr3 span {
  display: block;
  height: 8px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 3px;
  margin-left: 30px;
  margin-right: 32px;
}

.hr4 {
  text-align: center;
}

.hr4 img {
  margin-top: 28px;
}

.hr4 img + img {
  margin-left: 15px;
}

.hr5 {
  color: white;
  font-style: normal;
  font-family: georgia;
  font-size: 28px;
  text-align: center;
  margin-bottom: 0px;
}

.hr6 {
  color: #38761d;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  font-family: georgia;
  margin-left: 635px;
margin-bottom: 0px;
  margin-top: -90px;
transform: rotate(-30deg);

}

.hr7 {
  color: #38761d;
  font-style: normal;
font-weight: bold;
  font-size: 30px;
  font-family: georgia;
 margin-left: 650px;
margin-top: 0;
margin-bottom: 0px;
transform: rotate(-30deg);

  }

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Testing<span></span></p>
    <div class="hr4"><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""></div>
    <p class="hr5">www.Testing.com</p>
<p class="hr6">TEST<span></span></p>
  <p class="hr7">TESTINGS<span></span></p>
</div>

300px height, not 302. Should equal 312 height.

Is it ok to have margin-top: -105px;, if not, what do I change?

<style type="text/css"> 

.outer {
  max-width: 808px; /*820 */
  border: 6px solid #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 89px;
  font-family: georgia;
  text-align: center;
  border-bottom: 6px solid #38761d;
  padding-bottom: 24px;
  margin-top: 3px;
  margin-bottom: 0;
}

.hr3 span {
  display: block;
  height: 8px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 3px;
  margin-left: 30px;
  margin-right: 32px;
}

.hr4 {
  text-align: center;
}

.hr4 img {
  margin-top: 28px;
}

.hr4 img + img {
  margin-left: 15px;
}

.hr5 {
  color: white;
  font-style: normal;
  font-family: georgia;
  font-size: 28px;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 19px;     /*312*/
}


.hr6 {
  color: #38761d;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  font-family: georgia;
  margin-left: 635px;
margin-bottom: 0px;
  margin-top: -105px;
transform: rotate(-30deg);

}

.hr7 {
  color: #38761d;
  font-style: normal;
font-weight: bold;
  font-size: 30px;
  font-family: georgia;
  margin-left: 650px;
  margin-top: 0;
  margin-bottom: 36px;
  transform: rotate(-30deg);

  }


</style>

</head>
<body>

<div class="outer">
    <p class="hr3">TESTING<span></span></p>
    <div class="hr4"><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""></div>
    <p class="hr5">Testing</p>
<p class="hr6">TEST<span></span></p>
  <p class="hr7">TESTINGS<span></span></p>
</div>

I was able to get it down to margin-top: -87 px


<style type="text/css"> 

.outer {
  max-width: 808px; /*820 */
  border: 6px solid #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 89px;
  font-family: georgia;
  text-align: center;
  border-bottom: 6px solid #38761d;
  padding-bottom: 24px;
  margin-top: 3px;
  margin-bottom: 0;
}

.hr3 span {
  display: block;
  height: 8px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 3px;
  margin-left: 30px;
  margin-right: 32px;
}

.hr4 {
  text-align: center;
}

.hr4 img {
  margin-top: 28px;
}

.hr4 img + img {
  margin-left: 15px;
}

.hr5 {
  color: white;
  font-style: normal;
  font-family: georgia;
  font-size: 28px;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 0px;     /*312*/
}


.hr6 {
  color: #38761d;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  font-family: georgia;
  margin-left: 635px;
  margin-top: -87px;
  margin-bottom: 0px;

transform: rotate(-30deg);

}

.hr7 {
  color: #38761d;
  font-style: normal;
font-weight: bold;
  font-size: 30px;
  font-family: georgia;
  margin-left: 650px;
  margin-top: 0;
  margin-bottom: 36px;
  transform: rotate(-30deg);

  }


</style>

</head>
<body>

<div class="outer">
    <p class="hr3">TESTING<span></span></p>
    <div class="hr4"><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""></div>
    <p class="hr5">Testing</p>
<p class="hr6">TEST<span></span></p>
  <p class="hr7">TESTINGS<span></span></p>
</div>

In this case is having margin-top: -87 px acceptable or not?

I don’t think there’s an alternative.

Assuming that this box is a collection of experiments, I’ll toss this one in… FWIW :slight_smile: .

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>diagonal text1</title>
<!--
https://www.sitepoint.com/community/t/is-there-a-simple-way-to-caddy-corner-text-in-css/252203/2
asasass
-->
    <style type="text/css">
.outer {
    max-width: 808px; /*820 */
    height: 300px;
    border: 6px solid #38761d;
    background-color: #000;
    margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
    color: #38761d;
    font-style: normal;
    font-size: 89px;
    font-family: georgia;
    text-align: center;
    border-bottom: 6px solid #38761d;
    padding-bottom: 24px;
    margin-top: 3px;
    margin-bottom: 0;
}

.hr3 span {
    display: block;
    height: 8px;
    background-color: #15c;
    transform: rotate(-.9deg);
    margin-top: 3px;
    margin-left: 30px;
    margin-right: 32px;
}

.hr4 {
    text-align: center;
}

.hr4 img {
    margin-top: 28px;
}

.hr4 img + img {
    margin-left: 15px;
}

.hr5 {
    color: white;
    font-style: normal;
    font-family: georgia;
    font-size: 28px;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 0px;     /*312*/
}

.hr6 {
    color: #38761d;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    font-family: georgia;
    margin-left: 635px;
    margin-top: -87px;
    margin-bottom: 0px;
    transform: rotate(-30deg);
}

.hr7 {
    color: #38761d;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    font-family: georgia;
    margin-left: 650px;
    margin-top: 0;
    margin-bottom: 36px;
    transform: rotate(-30deg);
}
.hr8 {
    display:table;
    color: #38761d;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    font-family: georgia;
    margin-left:auto;
    transform: rotate(-30deg) translateX(10%) translateY(-150%);
    outline:1px dashed white;
}
.hr8 p {
    margin:0;
}

    </style>
</head>
<body>

<div class="outer">
    <p class="hr3">TESTING<span></span></p>
    <div class="hr4"><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""></div>
    <p class="hr5">Testing</p>
<!--
    <p class="hr6">TEST</p>
    <p class="hr7">TESTINGS</p>
-->
    <div class="hr8">
        <p>TEST<span></span></p>
        <p>TESTINGS<span></span></p>
    </div>
</div>

</body>
</html>

How come you kept margin-top: -87px;?

I thought negative margins were wrong to do.

First, negative margins are not bad but are often used inappropriately… without understanding why they seem to be needed.

I did not keep the margin-top:-87px. That HTML for .hr6 and .hr7 is commented out.

Look at the HTML and CSS for .hr8.

See Look

Look See…

<!--
    <p class="hr6">TEST</p>
    <p class="hr7">TESTINGS</p>
-->

It’s used on 6?

And the HTML for 6 and 7 is commented out, so it is not being used.

I posted a “working page”. Copy it to a file and open it in your browser. Take your blinders off. :eyes:

I like this way.

<style type="text/css"> 

.outer {
  max-width: 808px; /*820 */
  border: 6px solid #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 89px;
  font-family: georgia;
  text-align: center;
  border-bottom: 6px solid #38761d;
  padding-bottom: 24px;
  margin-top: 3px;
  margin-bottom: 0;
}

.hr3 span {
  display: block;
  height: 8px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 3px;
  margin-left: 30px;
  margin-right: 32px;
}

.hr4 {
  text-align: center;
}

.hr4 img {
  margin-top: 28px;
}

.hr4 img + img {
  margin-left: 15px;
}

.hr5 {
  color: white;
  font-style: normal;
  font-family: georgia;
  font-size: 28px;
  text-align: center;
  margin-top: 24px;
  margin-bottom: -87px;     /*312*/


}

.hr8 {
  color: #38761d;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  font-family: georgia;
  margin-left: 640px;
  margin-top: 0px;
  margin-bottom: 36px;
  transform: rotate(-30deg) translateX(2px) translateY(-10px);
  outline:1px dashed white;
}
.hr8 p {
  margin:0;  
}

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">TESTING<span></span></p>
    <div class="hr4"><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""></div>
    <p class="hr5">Testing</p>
    <div class="hr8">
        <p>TEST<span></span></p>
        <p>TESTINGS<span></span></p>
    </div>
</div>

I like using px instead of %.


transform: rotate(-30deg) translateX(2px) translateY(1px);

I never knew about this. Thanks.

I was trying to figure out how to put 2 hr’s together, you did it.

Interesting, I assigned “auto” to margin-left. You kept the large value. You also kept the margin-bottom, too. Zoom TEXT-ONLY a little larger and compare the results with your choices and my choices.

This is the only thing that reads auto.

margin: 0 auto; /* top+bottom left+right */

<style type="text/css"> 

.outer {
  max-width: 808px; /*820 */
  border: 6px solid #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 89px;
  font-family: georgia;
  text-align: center;
  border-bottom: 6px solid #38761d;
  padding-bottom: 24px;
  margin-top: 3px;
  margin-bottom: 0;
}

.hr3 span {
  display: block;
  height: 8px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 3px;
  margin-left: 30px;
  margin-right: 32px;
}

.hr4 {
  text-align: center;
}

.hr4 img {
  margin-top: 28px;
}

.hr4 img + img {
  margin-left: 15px;
}

.hr5 {
  color: white;
  font-style: normal;
  font-family: georgia;
  font-size: 28px;
  text-align: center;
  margin-top: 24px;
  margin-bottom: -87px;     /*312*/


}

.hr8 {
  color: #38761d;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  font-family: georgia;
  margin-left: 640px;
  margin-top: 0px;
  margin-bottom: 36px;
  transform: rotate(-30deg) translateX(2px) translateY(1px);
  outline:0px dashed white;
}
.hr8 p {
  margin:0;  
}

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Testing<span></span></p>
    <div class="hr4"><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""></div>
    <p class="hr5">Testing</p>
    <div class="hr8">
        <p>TEST<span></span></p>
        <p>TESTINGS<span></span></p>
    </div>
</div>

I’m quoting my CSS for .hr8. See {margin-left:auto} and no other margins.
Also notice {display:table} at the top of .hr8.

1 Like