在自定義形狀中包裝文本

2015-01-02 55 views 1 likes

如何通過示例中所示的純HTML 5和css 3實現此目的？主要目標是用自定義形狀中的空格來包裝文本。在自定義形狀中包裝文本

我想如何用javascript，但它是錯誤的方式。

enter image description here

2015-01-02 aleha

使用類似[this generator]（http://www.csstextwrap.com/#） – jbutler483

@ jbutler483是純粹的CSS和HTML解決方案嗎？ – aleha

回答

.shaped{ 
    /*...*/ 
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%); 
    shape-margin: 20px; 
}

編輯後：

我相信有填充工具

<script src="shapes-polyfill.min.js"></script>

但我並沒有通過自己檢查，所以不能給你100％肯定..

編輯2：

這裏是codepen例子（不是由我 - 現在在codepen上發現）CODEPEN EXAMPLE

2015-01-02 16:44:34

非常酷，但[瀏覽器兼容性]（https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside#Browser_compatibility）相當低 –

相關問題