Html Question posted in
Some basic documentation can be found here.

Html – Want to add tag at the top left of a product card

I want to make a tag for a card on my website for a new product. My idea is to have something like this

in the top left corner of the card.

I am writing about this, because I need help making the css for it.

I tried making it just a square with rounded corners, but I didn’t like the look. Here is the example of the layout.

Here is the html and css for the card:

CSS


#games div {     
  background-color: #3A7BCD; 
  border-radius: 7px; 
  cursor: pointer;
  overflow: clip;
  min-width: 100%;
  max-width: 400px;
  margin-bottom: 15px;
}
#games div *:not(img) {
  margin: 10px;
}
#games div img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

HTML


<div>
  <img src="https://i.postimg.cc/9FJYqQKg/Screen-Shot-2024-05-08-at-4-22-24-PM.png" alt="Banner image">
   <h2>
     Title
   </h2>
   <p>
     Description
   </p>
</div>
Tags:

2

Answers


  1. 0

    Your problem is in the overflow property defined as clip, in this case in practice you are hiding all the content that overflows your element. A possible solution (although it may not be ideal) would be to wrap your element in a div with the same dimensions and then add the tag you want.

    Login or Signup to reply.
  2. 0

    Have a look at this example, where I used a simple div instead of an image: It has position: absolute, the parent has position: relative to act as the position root. The left and top parameters can be adjusted as needed, as well as the transform: rotate(...) angle. But the principle should be clear:

    #parent {
  background-color: #3A7BCD;
  border-radius: 7px;
  cursor: pointer;
  margin-bottom: 15px;
  position: relative;
  top: 30px;
  left: 30px;
  width: calc(100% - 60px);
}

#parent *:not(img) {
  margin: 10px;
}

#parent img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
#new {
 width: 100px;
 height: 60px;
 background: green;
 position: absolute;
 transform: rotate(-25deg);
 top: -25px;
 left: -30px;
 border-radius: 8px;
 color: white;
 font-size: 30px;
 line-height: 60px;
 text-align: center;
}
    <div id="parent">
<div id="new">NEW</div>
  <img src="https://i.postimg.cc/9FJYqQKg/Screen-Shot-2024-05-08-at-4-22-24-PM.png" alt="Banner image">
  <h2>
    Title
  </h2>
  <p>
    Description
  </p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search