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 ，因此您的圖像 position 將是相對於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>