css中的圆形倾斜顶部形状答案

【问题标题】：Rounded skewed top shape in csscss中的圆形倾斜顶部形状
【发布时间】：2019-08-22 18:24:56
【问题描述】：

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

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

【问题讨论】：

发布您尝试过的内容..或制作小提琴

【解决方案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;
}

&lt;div&gt;Some text&lt;/div&gt;

div 具有 overflow:hidden 以便隐藏伪元素的溢出部分。
伪元素有一个负数z-index，所以它堆叠在div的内容后面
transform-origin 设置为0 0，这样倾斜的伪元素的左上角就不会移动。

【讨论】：

谢谢！我不知道为什么我没有想过要分开。它工作得很好，很容易应用于其他情况

【解决方案2】：

您可以为此使用倾斜的伪元素，以确保文本也不会倾斜：

.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>

【讨论】：