CSS创建响应式圆圈，其中包含文本和圆圈顶部的图像

Question

我想要实现一个非常困难的 html 设计。但是，我完全不知道如何创建一个里面有文字的圆圈，并且在圆圈的顶部有一个小图像。

所有这些都必须是响应式的，这使得它变得更加困难。 这就是我可以创建一个圆圈的方法。但是这个没有响应..

圆形图片应位于右上角的圆环顶部，文字应居中。垂直和水平！

#circle-text {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    text-align: center;
    border-color: black;
    border-style: solid;
    border-width: 1px;
}

#circle-image {
  position: absolute;
  top: 0px;
  right: 0px;
  border-radius: 100px;
}

<div id="circle-text">
<img id="circle-image" src="https://picsum.photos/200">
<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 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.</span>
</div>

Answer 1

使用::before 为您的文本创建多边形形式。并将position: relative; 添加到circle-text，这样您的图像位置将是相对的circle-text

  #circle-text {
                position: relative;
                width: 500px;
                height: 500px;
                border-radius: 50%;
                text-align: center;
                border-color: black;
                border-style: solid;
                border-width: 1px;
            }

            #circle-image {
                position: absolute;
                top: 20px;
                right: 0px;
                width: 100px;
                border-radius: 100px;
            }

            #circle-text::before {
                content: "";
                width: 50%;
                height: 100%;
                float: left;
                shape-outside: polygon(
                    0 0,
                    98% 0,
                    50% 6%,
                    23.4% 17.3%,
                    6% 32.6%,
                    0 50%,
                    6% 65.6%,
                    23.4% 82.7%,
                    50% 94%,
                    98% 100%,
                    0 100%
                );
                shape-margin: 7%;
            }

            #circle-text span::before {
                content: "";
                width: 50%;
                height: 100%;
                float: right;
                shape-outside: polygon(
                    2% 0%,
                    100% 0%,
                    100% 100%,
                    2% 100%,
                    50% 94%,
                    76.6% 82.7%,
                    94% 65.6%,
                    100% 50%,
                    94% 32.6%,
                    76.6% 17.3%,
                    50% 6%
                );
                shape-margin: 7%;
            }

 <div id="circle-text">
            <img id="circle-image" src="https://picsum.photos/200">
            <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 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.</span>
        </div>