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

Question

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

在css中间的文字.我试着看变换和其他三维东西,但我无法弄明白,尤其是在不破坏文本的情况下.

Answer 1

您可以使用倾斜的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使歪斜伪元素的左上方不动.