Skip to content

Instantly share code, notes, and snippets.

@Clarence-pan

Clarence-pan/0_test.html

Created November 2, 2017 05:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Clarence-pan/8ef3fdab2fe93f39be9c96b1a138a6af to your computer and use it in GitHub Desktop.
Save Clarence-pan/8ef3fdab2fe93f39be9c96b1a138a6af to your computer and use it in GitHub Desktop.
Download ZIP
多边形文本区域，自动换行，自动裁剪，沿着多边形来排版
Raw
0_test.html
<!doctype html>
<html>
<head>
<style>
.main {
width: 13em;
text-align: center;
}
.left, .right {
width: 29.3%;
height: 13em;
background-color: lightgray;
}
.left3,.right3{
width: 1px;
}
.left {
-webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);
shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);
float: left;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);
}
.right {
-webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);
float: right;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);
}
p {
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<p>
这是一段文本。这是一段文本。
这是一段文本。这是一段文本。
这是一段文本。这是一段文本。
这是一段文本。这是一段文本。
这是一段文本。这是一段文本。
这是一段文本。这是一段文本。
</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment