相关疑难解决方法(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万
查看次数

如何使用css3和html5制作具有不规则形状的div？

我想知道是否有可能建立不规则形状的div,类似于此(例如格陵兰,欧洲,非洲).我想使用CSS3和HTML5创建这里的地图.

这是示例图像的链接:

html5 css3 css-shapes

Raf*_*ath

2017 01-19

14
推荐指数

2
解决办法

5万
查看次数

创建Isoceles梯形形状

我想知道我是否可以使用CSS生成与此类似的东西:

在此输入图像描述

而且我也想知道,这是一个适合这样一个问题的地方吗？我没有尝试任何代码,我用photoshop完成了棕色图像.

谢谢你的帮助 !

css shape css3 css-shapes

voi*_*oid

2014 09-14

1
推荐指数

1
解决办法

750
查看次数

如何用CSS设置形状？

是否可以用CSS将背景设置为相同的形状？

带有 css 的预期图像

.cover {
    margin: 0;
    height: 70vh;
    width: 60vw;
    background-color: #073faa;
    border-radius: 0px 30px 30px 0px;
    transform-origin: bottom left;
  -ms-transform: skew(-30deg, 0deg);
  -webkit-transform: skew(-30deg, 0deg);
  transform: skew(-30deg, 0deg);
  border-radius:0px 10px 10px 0px
}

Run Code Online (Sandbox Code Playgroud)