在css中圆形倾斜的顶部形状

时间:2015-03-16 09:52:52

标签: css css3 transform css-shapes

我需要制作一个看起来像这样的div:

skewed top with rounded corners

css中间有文字。我试着看变换和其他三维东西,但我无法弄清楚,特别是在不破坏文本的情况下。

2 个答案:

答案 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)

你可以使用偏斜的伪元素,这样可以确保文本不会被歪斜:

&#13;
&#13;
.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;
&#13;
&#13;