我需要制作一个看起来像这样的div:
css中间有文字。我试着看变换和其他三维东西,但我无法弄清楚,特别是在不破坏文本的情况下。
答案 0 :(得分:7)
您可以使用倾斜的Y伪元素作为元素的背景。这不会影响内容:
div {
position: relative;
display: inline-block;
padding: 20px 50px;
overflow: hidden;
}
div:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FFD505;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: skewY(5deg);
-ms-transform: skewY(5deg);
transform: skewY(5deg);
z-index: -1;
border-radius: 10px 10px 0 0;
}
<div>Some text</div>
div
有溢出:隐藏,以便隐藏伪元素的溢出部分。z-index
,因此它会叠加在div
transform-origin
设置为0 0
,因此偏斜的伪元素的左上角不会移动。答案 1 :(得分:1)
你可以使用偏斜的伪元素,这样可以确保文本不会被歪斜:
.wrap {
height: 100px;
width: 400px;
position: relative;
overflow: hidden;
padding-top: 30%;
}
.wrap:before {
content: "";
position: absolute;
border-radius: 5px;
height: 100%;
width: 100%;
left: 0;
top: 20%;
background: tomato;
transform: skewY(5deg);
z-index: -2;
}
&#13;
<div class="wrap">hello
</div>
&#13;