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

Html – Set height of inline box dynamically to same value as width

For some numbers in a text, I want give them a appearance of coins.
This seems pretty easy at first: put them in a span background and apply some border-radius.

But how achieve a quadratic box (to get a circle with border-radius)?

First I tried display: inline flow-root to have a block formatting context and be able to set height with aspect-ratio: 1/1.

But with this the box grows only to bottom. How do I center the box, but let its content stay on the normal text line? vertical-align: middle would center the box, but moves content too, so coin number wouldn’t stay at the baseline with the surrounding text.

And furthermore in block formatting context coin box with three digit numbers will push the lines apart.

Is there a solution to get a quadratic box for inline elements, which don’t push lines apart? (it is okay the box for this coin numbers overlap the surrounding lines a bit)

.coinDukat {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    padding: 0.2em;
    min-width: 1.1em;
    aspect-ratio: 1/1;
    background: goldenrod;
    color: #815d05;
    text-align: center;
/*vertical-align: middle;*/
}
<p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ipsum dolor sit sadipscing elitr, ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <span class="coinDukat">1</span> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>Lorem ipsum dolor sit amet, sit Preis: <span class="coinDukat">300</span>. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt <span class="coinDukat">50</span> magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I remembered the pattern with a absolute positioned ::before pseudo element: In addition this works with an image for background (in my case a circular metal texture)

    .coinDukat {
  position: relative;
  z-index: 1;
  padding-inline-start: 0.15em;
  padding-inline-end: 0.15em;
}
.coinDukat:before {
  content: '';
  position: absolute;
  display: block;
  overflow: visible;
  width: 100%;
  top: 50%;
  left: 50%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: yellow;
  //background-image: url("../images/Dukat.avif");
  //background-position: center;
  //background-size: cover;
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
}
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ipsum dolor sit sadipscing elitr, ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <span class="coinDukat">1</span> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>Lorem ipsum dolor sit amet, sit Preis: <span class="coinDukat">300</span>. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt <span class="coinDukat">50</span> magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

    But does anybody know, why i need to set z-index on the span?


  2. 0

    I would fake this with some clip-path and an overflowing background.

    The border is used to create the overflowing background: https://css-tip.com/overflowing-background/

    .coinDukat {
  padding: .2em; /* space inside the circle */
  margin: .2em; /* space outside the circle */
  border-image: linear-gradient(goldenrod 0 0) fill 0//100vw; /* the color here (don't need to touch the other values) */
  clip-path: circle(71%); /* make a circle that fit the content */
  color: #815d05;
}
    <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ipsum dolor sit sadipscing elitr, ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <span class="coinDukat">1</span> sed diam nonumy eirmod
  tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>Lorem ipsum dolor sit amet, sit Preis: <span class="coinDukat">300</span>. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt <span class="coinDukat">50</span> magna aliquyam erat, sed diam voluptua. At vero
  eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

    Related question to understand the 71% of the clip-path: clip-path:circle() radius doesn't seem to be calculated correctly

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

Back To Top
Search