Created
November 2, 2017 05:43
-
-
Save Clarence-pan/8ef3fdab2fe93f39be9c96b1a138a6af to your computer and use it in GitHub Desktop.
多边形文本区域,自动换行,自动裁剪,沿着多边形来排版
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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