1

I have thoroughly searched the net and in particular w3schools, but unable to find the technical term for my requirement, so posting this question with images.

I have this simple box in a standard HTML DIV element:

The basic HTML is

#my-box {
    padding: 20px;
    margin: 20px;
    border: #212121 3px solid;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    border-radius: 3px;
}

I simply want to add a "Bubble" or a "Star", or a "Badge", or a "Callout" kind of shape at the top-left of this box, where I can place some promotional text, like as follows:

enter image description here

I just don't know what this top-up figure is called in technical HTML terms, so seeking help. Searching for "Batch", "Callout", "Banner" HTML terms are giving something else.

Will be happy to delete this question if there is something already available. Please let me know with examples (or links).

Aquaholic
  • 863
  • 9
  • 25
  • Mech - Thanks for the guidance. However, since Box size and banner text size may vary, inserting an image will NOT be that useful. So that answer is partially helpful. The asnwer provided by @levent001 is a better fit - I'll give it to levent001 for the efforts. :-) – Aquaholic Sep 14 '22 at 17:17

1 Answers1

1

enter image description here

This should work for you - try varying top & left pixel sizes to fit your needs:

<style>
    #content {
        position: relative;
    }

    #content p {
        position: absolute;
        top: 10px;
        left: 10px;
    }

.rotated {
  transform: rotate(-45deg); /* Equal to rotateZ(45deg) */
  background-color: red;
}

#my-box {
    padding: 20px;
    margin: 20px;
    border: #212121 3px solid;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    border-radius: 3px;
}
</style>



<div id="content">
    <p class="rotated">&nbsp;Banner Text&nbsp;</p>
    <div id="my-box">some text...some text...some text...<br>some text...some text...some text...</div>
</div>
levent001
  • 174
  • 7