1

我希望<p>在我的文档中包含在一个有角度的<section>容器中，以便为段落创建阶梯线。理想情况下，我希望该段落采用平行四边形的形状。就目前而言，当我旋转我的段落以使线条水平时，该段落超出了<div>. 请参阅下面的我的 JSFiddle 链接：

http://jsfiddle.net/aredtiefilm/sUymx/2/

当我尝试溢出选项时，我能做的最好的就是隐藏段落之外的部分<section>。我想强制段落的内容采用容器的形状，而不隐藏或滚动。这可能吗？

4

2 回答 2

0

Use following css for paragraph element. It will work fine.

MODIFIED CSS :

p{
  border: 1px solid blue;
}
于 2013-02-17T07:09:12.410 回答
0

不完美，但这是我认为你能得到的最好的。用倾斜替换旋转：

section{
    color: #4A2583;
    -ms-transform:skewX(10deg); 
    -moz-transform:skewX(106deg); 
    -webkit-transform:skewX(10deg); 
    -o-transform:skewX(10deg);
    transform:skewX(10deg);
    width: 200px;
    border: 1px solid red;
    display: block;
    position: relative;
    left: 200px;
}

您不需要为 p 设置样式，它没用。（你不能旋转个别的线，你只能旋转它作为一个块）

你需要限制角度，因为字母也会歪斜，如果你做得太多会很丑。

更新的小提琴

于 2013-05-25T20:02:35.780 回答