CSS中的圆形偏斜顶部形状 [英] Rounded skewed top shape in css

问题描述

我需要制作一个如下所示的div：

I need to make a div that looks like this:

css中间带有文本。我尝试查看转换和其他3D内容，但无法弄清楚，尤其是在不破坏文本的情况下。

With text in the middle in css. I tried looking at transforms and other 3d stuff, but I couldn't figure it out, especially without ruining the text.

推荐答案

您可以将偏斜的Y伪元素用作元素的背景。这不会影响内容：

You can use a skewed Y pseudo element as a background of the element. This won't affect the content :

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索引，因此它堆积在 div


• 的内容之后 transform-origin 设置为 0 0 ，这样倾斜的伪元素的左上角不会移动。 / li>
  

• The div has overflow:hidden so that the overflowing parts of the pseudo-element are hidden.
• The pseudo element has a negative z-index so it stacks behind the content of the div
• The transform-origin is set to 0 0 so that top left of the skewed pseudo element doesn't move.

这篇关于CSS中的圆形偏斜顶部形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！