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

Html – 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?

Tags:

2

Answers


  1. 0

    To make a span perfectly centered you can use this

    span {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
    <h1>
  <span>Hello World</span>
</h1>
    Login or Signup to reply.
  2. 0

    You may use the following code:

    <style>
.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%;
}
</style>
    <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>

    Somehow snippet doesn’t show desired results but I have tried it in chrome and firefox and it does give the desired results.

    Hope you find this useful!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search