相关疑难解决方法(0)

我试图创建一个如下图所示的形状,仅在一侧(例如,底侧)具有倾斜边缘,而其他边缘保持笔直.

我尝试使用border方法(代码如下),但我的形状的尺寸是动态的,因此我不能使用这种方法.

.shape {
    position: relative;
    height: 100px;
    width: 200px;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    height: 0px;
    width: 0px;
    left: 0px;
    bottom: -100px;
    border-width: 50px 100px;
    border-style: solid;
    border-color: tomato tomato transparent transparent;
}

<div class="shape">
    Some content
</div>

我也尝试使用渐变作为背景(如下面的代码所示),但随着尺寸的变化,它会变得混乱.你可以通过悬停在下面代码片段中的形状来看到我的意思.

.gradient {
  display: inline-block;
  vertical-align: top;
  height: 200px;
  width: 100px;
  margin: 10px;
  color: beige;
  transition: all 1s;
  padding: 10px;
  background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;
}
.gradient:hover {
  width: 200px;
} …

有谁知道如何实现这样的倾斜:

使用CSS的新转换属性？

你可以看到我试图扭转两个角落,任何人都知道这是否可能？

我试图扭曲一个div,类似于这个: 使用css倾斜div的顶部而不会扭曲文本 或者:http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3 /

这是我想要做的事情的图像:

基本上,我需要在所有四个方面以奇怪的方式倾斜边界.我可以用背景图像做到这一点,但我更喜欢用CSS做一些方法,所以div可以在宽度和高度上做出响应.我想找到一个适用于旧浏览器的解决方案,但我知道我不能拥有一切!

在所有4个边上都有倾斜边框的最佳方法是什么？(注意:绿色框底部的边框在中间向下倾斜,在外部向下倾斜,我不需要边框就可以做到这一点.只需向一个方向倾斜即可.)