htmlcssribbon

Create a ribbon where the size (height) adjusts automatically if more text is inside

I want to create yet another ribbon, this time with a text inside it, that can be short but long too. (In my task its a heading, and the text has to be perfectly centered.

If I looked it up correctly, I need a < span> in my < h1>, is that right?

The little shadow underneath I would do with something like:

box-shadow: 0 5px 0px 0px MYCOLOR;

Other than that, I'm afraid I don't know the best way to code this. I hope someone can help me with this.

This is what it has to look like

edit: Could it be easier to make a < div> and try to get this "design" with border-radius?

Solution

  • You may use the following code:

    .ribbon {
  box-shadow: 0 5px 0px 0px grey;
  background-color: yellow;
  border-radius: 0 0 50% 0 / 0 0 20% 0;
  display: flex;
  flex-direction: column;
  mask-image: radial-gradient(ellipse 50% 20% at top center, transparent 0, transparent  100%, black 101%);
  -webkit-mask-image: radial-gradient(ellipse 50% 20% at top center, transparent 0, transparent  100%, black 101%);
  align-items: center;
}
.ribbon span{
  text-align: center;
}
#preSpan {
min-height: 20%;
min-width: 100%;
}
    <div class="ribbon"><span id="preSpan"></span><br><span>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</span></div>

    Hope you find this useful!