使用CSS3的shape-outside特性实现文本沿特定外形路径环绕效果

常用于文本紧贴图片的环绕效果。

css3, shape

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3032
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

img {
  float: left; 
	height: 600px;
	width: 600px;
	shape-outside: polygon(24.55% -23.75%, 34.55% -23.6%, 64.05% 5%, 64.05% 5%, 64.2% 27.2%, 70.15% 35.8%, 69.05% 42.65%, 57.5% 46.25%, 60.45% 54.85%, 61.1% 62.5%, 55.15% 66.25%, 55.8% 92.65%, 24.05% 92.65%);
}

// styles for fun, not important to show css-shapes

// CSS Pattern from Lea Verou
// lea.verou.me/css3patterns/#starry-night 
body {
	background-color: hsl(240,100,5);
	color: #fff;
	font-family: "Libre Baskerville", serif;
	line-height: 1.7;
	position: relative;
	width: 100%;
}

main,
.title {
	margin: 0 auto;
	max-width: 60rem;
}

.title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 .5rem 0;
	padding: 3.5rem 0 0;
	
	span {
		color: hsl(200, 90, 90);
		font-size: 2rem;
		font-style: italic;
		font-weight: 400;
		line-height: 1.2;
		margin: 0;
	}
}

@supports (shape-outside: circle() ) {
	.title {
		padding: 2.0rem 0 0;
	}
}

.intro {
	color: hsl(30, 50, 60);
	font-style: italic;
	font-size: 1.15rem;
	text-shadow: 1px 1px 1px #333;
}

p {
	font-size: .9rem;
	margin: 0;
	padding-top: 1.5rem;
}

.first {
	padding-top: 2rem;
}

img {
	padding: 1.25rem;
}

HTML

Shape Outside Demo polygon

The following are a few of my favorite excerpts from the 2005 Stanford University commencement speech given by Steve Jobs.

“No one wants to die. Even people who want to go to heaven don't want to die to get there. And yet death is the destination we all share. No one has ever escaped it. And that is as it should be, because Death is very likely the single best invention
 of Life. It is Life's change agent. It clears out the old to make way for the new. Right now the new is you, but someday not too long from now, you will gradually become the old and be cleared away. Sorry to be so dramatic, but it is quite true.

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important,
 have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.

Stay Hungry. Stay Foolish.”

</main>

常用于文本紧贴图片的环绕效果。

css3, shape

编辑器支持Emmet

快捷键

常用于文本紧贴图片的环绕效果。

css3, shape

使用CSS3 clip-path特性实现文本沿特定形状环绕图片

CSS3 使用shape-outside属性生成圆形外框效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：