css 中的圆形倾斜顶部形状
Rounded skewed top shape in css
我需要制作一个如下所示的 div:
css 中间有文字。我尝试查看变换和其他 3d 内容,但我无法理解,尤其是在不破坏文本的情况下。
您可以使用倾斜的 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
有overflow:hidden隐藏了伪元素溢出的部分
- 伪元素有一个负数
z-index
所以它堆叠在 div
的内容后面
transform-origin
设置为 0 0
,这样倾斜伪元素的左上角就不会移动。
您可以为此使用倾斜的伪元素,以确保文本也不会倾斜:
.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;
}
<div class="wrap">hello
</div>
我需要制作一个如下所示的 div:
css 中间有文字。我尝试查看变换和其他 3d 内容,但我无法理解,尤其是在不破坏文本的情况下。
您可以使用倾斜的 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
有overflow:hidden隐藏了伪元素溢出的部分- 伪元素有一个负数
z-index
所以它堆叠在div
的内容后面
transform-origin
设置为0 0
,这样倾斜伪元素的左上角就不会移动。
您可以为此使用倾斜的伪元素,以确保文本也不会倾斜:
.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;
}
<div class="wrap">hello
</div>