使用CSS的文本的斜邊距

Question

我正在尋找一種簡單而優雅的方法來使用css來動態增加HTML文本區域（div）的右邊距，如下所示，並且具有可配置的度數（比如說45度開始）。

Lorem ipsum dolor sit amet, consectetur adipiscing elit,/
sed do eiusmod tempor incididunt ut labore et dolore   /
magna aliqua. Ut enim ad minim veniam, quis nostrud   /
exercitation ullamco laboris nisi ut aliquip ex ea   /  
commodo consequat. Duis aute irure dolor in         /
reprehenderit in voluptate velit esse cillum dolore/ 
eu fugiat nulla pariatur. Excepteur sint occaecat /

斜線示意性地表示頁邊距隨每個文本行增加。

Answer 1

您可以使用CSS clip-path （ generator ），但是它的支持非常差。

另一種方法是計算每行有多少個符號。

例如，如果1個字母為〜10px，則大於（未測試） ：

[php]
$letters = explode('', $text);
$letterSize = 10;
$startingLength = 120;
$textGrid = [];
$row = 0;
$rowLength = 0;

while (!empty($letters)) {
   if (!isset($textGrid[$row])) {
       $textGrid[$row] = [];
   }

   $textGrid[$row][] = array_pop($letters);

   $rowLength++;

   if ($rowLength >= $startingLength / $letterSize) {
       $startingLength -= $letterSize; // experiment here for 45 angle.
       $rowLength = 0;
       $row++;
   }
}

foreach ($textGrid as $row) {
    echo '<span>';
    foreach ($row as $letter) {
        echo $letter;
    }
    echo '</span>';
}

Answer 2

這是另一個使用float:right示例float:right http://jsfiddle.net/t8pgkdp8/3/

您可以使用任何CSS預處理器或javascript生成這些樣式

Answer 3

看一下CSS Shapes模塊級別1 。 特別是在shape-outside屬性中，該屬性使您可以更改浮動元素的幾何形狀，但要注意，它的狀態為“候選推薦”，目前很可能在FF或IE中不起作用。

我可以在外形上使用

這是不支持的瀏覽器的polyfill shape-polyfill

如果支持-webkit-shape-outside屬性，以下示例將向主容器添加一個帶有shape類的元素。

 if('-webkit-shape-outside' in document.body.style) { $('.main').prepend('<div class="shape">'); } 

 .main { width: 475px; height: 200px; } .shape { -webkit-shape-outside: polygon(45% 0, 100% 0%, 100% 100%, 0% 100%); shape-outside: polygon(45% 0, 100% 0%, 100% 100%, 0% 100%); float: right; width: 40%; height: 22ex; background-color: gray; -webkit-clip-path: polygon(45% 0, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(45% 0, 100% 0%, 100% 100%, 0% 100%); } p { text-align: justify; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="main"> <p> Sometimes a web page's text content appears to be funneling your attention towards a spot on the page to drive you to follow a particular link. Sometimes you don't notice. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod nam itaque, adipisci odit, quaerat veniam ea. Accusamus fugit mollitia blanditiis voluptas maiores, quas quisquam earum consequuntur explicabo repudiandae. Possimus, sit. </p> </div> 

Answer 4

我自己找到了一個解決方案，在這里提到： http : //www.howtocreate.co.uk/tutorials/css/slopes

基本上，這相當於設置寬度增加的邊框，如下所示：

<div style="border-bottom: 20px solid transparent;font-size: 0px; line-height: 0%; width: 0px;float:right;clear:right; margin-right: 50px"></div>
<div style="border-bottom: 20px solid transparent;font-size: 0px; line-height: 0%; width: 20px;float:right;clear:right; margin-right: 50px"></div>
<div style="border-bottom: 20px solid transparent;font-size: 0px; line-height: 0%; width: 40px;float:right;clear:right; margin-right: 50px"></div>
<div style="border-bottom: 20px solid transparent;font-size: 0px; line-height: 0%; width: 60px;float:right;clear:right; margin-right: 50px"></div>
<p>Some text here that will wrap with the angled border</p>

相當笨拙，但確實有效。 打開一個更好的解決方案。