如何在 css 中创建高边低边的矩形

Question

我正在努力 CSS 尝试创建特殊形状。

这是我想要创建的形状

enter image description here

你有什么解决办法吗？

谢谢

Answer 1

这个怎么样：

div {
  position: relative;
  height: 300px;
  overflow: hidden;
  border-radius: 25px;
}

.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  transform: skewY(-6deg);
  transform-origin: top right;
  border-radius: 25px;

<div>
  <div class="bg"></div>
</div>

如何在 css 中创建高边低边的矩形

How to create a rectangle with a high side and a lower one in css

css

shapes