Demand scenarios

When the front page needs to show whether the skin is in use, whether the book is being read, and whether the file is downloaded, the most direct effect is to display the corresponding label in the left/right corner of the box (div), which is not only beautiful and practical.

Here is an example of creating a label in the upper right corner of an image, using CSS to achieve the effect in the simplest and most direct way.

Implementation effect

Implementation approach

  • Prepare two divs (one parent container, one tag div), set the width and height, and set the layout relative to each other.
  • Place the tag div in the upper-right corner of the parent container, center the content, set the background and font color, and rotate the div.
  • The parent container is set to overflow: Hidden, to achieve the parent container to cover the tag div beyond the part, that is, to achieve the label effect.

Structure show

Code sample

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> */. Img-box {width: 200px; height: 400px; margin: 40px; overflow: hidden; position: relative; } /* Set the outer div to absolute, add top and right attributes, set height, line-height, text-align Rotate the tag 45 degrees */. Tag {width: 140px; height: 25px; top: 16px; right: -40px; text-align: center; line-height: 25px; transform: rotate(45deg); position: absolute; color: white; background: #4188ab; Img {display: block; width: 200px; height: 400px; } < / style > < / head > < body > < div class = "img - box" > < div class = "tag" > are using < / div > < img class = "img SRC ="... "" /> </div> </body> </html>Copy the code