This is the 30th day of my participation in the August More Text Challenge.

Page corner requirements

The main is to achieve the page closure corner here

The demo implementation

The first step to achieve non-rotating labels adjust the spacing width font size

<body style="background-color: #ccc;" > <div class="label"> <! <div class="label-detail"> <div class="label-detail"> </div></ div></body> <style>. Label { margin: 50px auto; background: white; height: 216px; width: 550px; position: relative; } .label-part{ position: absolute; right: 0; top: 0; } .label-detail{ padding: 8px 18px; text-align: center; font-size: 22px; color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#FF7979), to(#FF5858)); } </style>Copy the code

Add -webkit-transform: rotate(45deg);

Rotate is rotated based on the geometric center of an element rather than a right-angle vertex. Position is used to locate the rotated geometric center. The order is going to have a square root here, so it’s not easy to calculate. In addition, the label width is obviously too small. Adjust related parameters.

    .label {      margin: 50px auto;      background: white;      height: 216px;      width: 550px;      position: relative;    }    .label-part{      width:200px;      height:130px;      position: absolute;      right: 0;      top: 0;      overflow: hidden;    }    .label-detail{      position: relative;      top: 25px;      right: -50px;      -webkit-transform: rotate(45deg);      padding: 8px 20px;      text-align: center;      font-size: 22px;      color: #fff;      background-image: -webkit-gradient(linear, left top, left bottom, from(#FF7979), to(#FF5858));    }
Copy the code

I think I can, but I can’t say I’m a little uneasy.

Feel the style here is too dead, there is no reuse value. You might have to adjust it again next time. This is very rude.

Make a note of the holes you tread:

1. transform: Rotate (45deg) is rotated around the center of the geometry of the object and if the center of the geometry is not in the same position, it’s very painful to rotate position. The solution here is to lock the height of the parent element and lengthen the width of the parent element because the width of the rotated element is calculated by the rotated element. If the width of the parent element is not long enough, the child element will be squeezed to the next line.

2. If the width of the child element is not set, it is usually adaptive. If the number of words is too large, the problem shown in the image above can still occur. Here I just want to fine-tune the position. After determining the width of the child element, try to set the width of the parent element as reasonable as possible, and finally adjust the position. Any other idea would take more detours.

It’s a bit of a cold one. Demand is really cold today. 2) ω •́)y