我已经使用形状外部将文本环绕在图像上，例如这样
#hero .curve {
width: 33%;
height: auto;
min-width: 150px;
float: left;
margin-right: 2rem;
border-radius: 50%;
-webkit-shape-outside:circle();
shape-outside: circle();
}
但是如何将相同的文本区域变成形状？我正在尝试不使用Photoshop制作标题；我希望徽标位于左上角，并带有一条将徽标环绕的色带，然后拉伸页面的宽度。
我喜欢此方法'Inverted' border-radius possible?，但我希望能自动找到类似shape-outside: circle();的工作方式。我想将此作为顶部导航，并使用跨度链接。仅供参考。如果没有正确描述，我会附上我想要的外观模型。 Header Mockup Example
感谢您提供任何见识！
杰伊
为了解决我的目标，我已经反复尝试了无数种方法，但是它们都不足以达到我的理想分辨率。我在CSS中尝试了background-color: #000;，它只是用颜色填充了整个文本块。然后，我尝试使用内联CSS来作为BG颜色，它可以单独为文本添加颜色，但是看起来就像是大公司或政府机构提供的经过编辑的文本。我希望它只是像在shape-outside: circle();上所做的那样，在圆周围很好地形成的颜色。我找不到任何能做到这种形状的代码，并且对SVG的感觉还不够好……无论如何，我试图使用'line-height：1;'。但它不会小于1，因此文本之间仍然有行。仍然编辑。然后我尝试了字体，文本大小和符号，但是意识到，文本在圆上看起来好弯曲的唯一原因是因为字母和句子之间的空格，否则它将始终有90度角。总是。因此，它看起来不会像Photoshop等中的图像那样好看。然后，我记得编写了一个列表，并试图使项目符号在垂直方向上彼此靠得更近，并且由于使行太小而意外地使文本重叠。我认为，如果HTML5不允许我将“行高”设置为小于1，我会尝试使用“ list-style-type：none;”来尝试“ ul”或“ ol”“ li”。我可以重叠文本以使线条尽可能接近我想要的，但是它仍然具有那些方形边缘，不能很好地围绕圆打。我使用符号和不同的字母玩耍，但是使用“⊕”，因为如果您愿意，它会占用最多的“表面积”。我尝试过两种方法在星期二前破解它，但我已按自己的意愿解决了。这是一个hack，当然也不是很优雅，但是它可以满足我的需求。这是我的代码。就像我说的那样，这并不漂亮-边界丑陋。出于这篇文章的目的，我将在此处完整地发布CSS，但是HTML太多余了，因为我要一遍又一遍地打印相同的符号来创建行，并且字体大小很小，所以花了很多行做出形状。感觉就像我上小学时在DOS上绘制图片。
这里是截断的HTML。试想一下，同一“ li”的另外150行。
总体上，现在，感谢Stack Overflow及其社区。这是我的第一篇文章，但我已经来过这里数百次了，因为我敢肯定我们所有人都去过。
<style> #hero { font-family: 'Quicksand', sans-serif; } #hero p { line-height: 1.8; background: rgba(204, 204, 204, 0.0); padding-right: 4%; } #hero .curve { width: 33%; height: 33%; min-width: 150px; float: left; margin-right: 2rem; border-radius: 50%; -webkit-shape-outside:circle(); shape-outside: circle(); background-color: rgba(255,255,255,8); } ol, ul, li { list-style-type: none; font-weight: bold; font-size: 50%; text-shadow: 2px 2px #000; } </style> </head> <body> <div id="hero"> <img src="../images/jh-logo-lg.png" style="width: 5%; height: 5%;" class="curve"> <p> <ul style="line-height: 0"> <li>⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕</li> </ul> </div> </body> </html>