<分区>
<分区>
我正在尝试使用 HTML/CSS 创建它... http://postimg.org/image/uhmhf04qz/
现在，最初我试过..
<div class='box'>
<p>paragraph here</p>
</div>
CSS:
.box {
background: red;
width: 400px;
height: 800px;
margin: auto;
transform: skewX(-20deg);
}
但这也适用于子段落的倾斜，这使它看起来很变形，我试图使该段落适合父 div 的边界但又不会倾斜，有没有办法做到这一点HTML/CSS？
最佳答案
用负值补偿 p 元素内的正值。
Jsfiddle:http://jsfiddle.net/u4NtT/4/
<div id='shape'>
<p>paragraph here</p>
</div>
#shape {
width: 450px;
height: 350px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(2d0eg);
background: #333;
margin:100px;
}
#shape p {
font:1em normal Futura, sans-serif;
color:#f1f1f1;
padding:60px 60px;
-webkit-transform: skew(-20deg) !important;
-moz-transform: skew(-20deg) !important;
-o-transform: skew(-20deg) !important;
transform: skew(-20deg) !important;
}
关于html - 如何在不获得倾斜值的情况下使段落适合倾斜的父 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19191543/