相关疑难解决方法(0)

形状有倾斜的一面(响应)

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

CSS div有倾斜的一面

我尝试使用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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

.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;
} …

Run Code Online (Sandbox Code Playgroud)

html css css3 responsive-design css-shapes

Har*_*rry

2018 06-11

84
推荐指数

2
解决办法

1万
查看次数