Html 如何使用对角div进行造型？

我想做这个形状： 应该有3个像这样的div形状。我已经建立了一些形状，但我想看看这个形状将如何适合我的网站

我已经建立了这个：

我所做的css示例：

.mainOuterDiv{

    height:300px;

    overflow:hidden;
    background:#FFF;
}
.middDiv{
    width:70%;
    height:75px;
    background-color: #0CF;
    margin:0px auto;
    position:relative;
    margin-top:50%;
}
.innerLeft{
    position: absolute;
    left: -60px;
    top: -20px;
    width: 60px;
    height: 100%;
    z-index: 1;
    transform: skew(180deg,215deg);
    background-color: #0CF;
}
.innerRight{
    position: absolute;
    right: -60px;
    top: -20px;
    width: 60px;
    height: 100%;
    z-index: 1;
    transform: skew(180deg,145deg);
    background-color: #0CF;
}
.textDiv{
    z-index:9999;
    width:100%;
    height:100%;
    position:absolute;
    background-color: #0CF;
}

---

有没有办法在css中实现这一点

有一些例子：

.container
{
位置：相对位置；
宽度：400px；高度：302px；
溢出：隐藏；
}
梅因迪夫先生
{
高度：300px；宽度：300px；
背景色：白色；
边框：实心1px黑色；
位置：绝对位置；
左：0；右：0；边距：自动；
}
middDiv先生
{
高度：55px；宽度：70%；
背景颜色：浅蓝色；
位置：绝对位置；
底部：0；左侧：0；右侧：0；
保证金：自动；
z指数：10；
}
.leftDiv、.rightDiv
{
位置：绝对位置；
底部：26px；
宽度：30%；高度：48px；
背景颜色：蓝色；
z指数：10；
}
.leftDiv
{
左-13%；
变换：旋转（30度）倾斜（30度）；
}
.rightDiv
{
右图：-13%；
变换：旋转（-30度）倾斜（-30度）；
}
.leftBDiv、.rightBDiv
{
位置：绝对位置；
宽度：13%；高度：47px；
底部：59px；
背景色：黑色；
z指数：9；
}
.leftBDiv
{
左-12%；
变换：旋转（-30度）倾斜（-30度）；
}
.rightbiv
{
右图：-12%；
变换：旋转（30度）倾斜（30度）；
}

---

有一些例子：

.container
{
位置：相对位置；
宽度：400px；高度：302px；
溢出：隐藏；
}
梅因迪夫先生
{
高度：300px；宽度：300px；
背景色：白色；
边框：实心1px黑色；
位置：绝对位置；
左：0；右：0；边距：自动；
}
middDiv先生
{
高度：55px；宽度：70%；
背景颜色：浅蓝色；
位置：绝对位置；
底部：0；左侧：0；右侧：0；
保证金：自动；
z指数：10；
}
.leftDiv、.rightDiv
{
位置：绝对位置；
底部：26px；
宽度：30%；高度：48px；
背景颜色：蓝色；
z指数：10；
}
.leftDiv
{
左-13%；
变换：旋转（30度）倾斜（30度）；
}
.rightDiv
{
右图：-13%；
变换：旋转（-30度）倾斜（-30度）；
}
.leftBDiv、.rightBDiv
{
位置：绝对位置；
宽度：13%；高度：47px；
底部：59px；
背景色：黑色；
z指数：9；
}
.leftBDiv
{
左-12%；
变换：旋转（-30度）倾斜（-30度）；
}
.rightbiv
{
右图：-12%；
变换：旋转（30度）倾斜（30度）；
}

---

这是一个带有

skewY

的响应版本，我使用了

：pseudo

元素

*{
框大小：边框框；
}
.集装箱{
宽度：300px；
高度：300px；
保证金：0自动；
边框：1px纯黑；
位置：相对位置；
}
.内容{
背景：白色；
z指数：1；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
填充：15px；
}
.影子{
宽度：70%；
位置：绝对位置；
左：50%；
身高：18%；
底部：18%；
背景#7092BE；
边框：1px纯黑；
转化：translateX（-50%）；
z指数：-1；
}
影子：以前，
.影子：之后{
内容：''；
位置：绝对位置；
宽度：30%；
背景#7092BE；
身高：100%；
底部-28%；
边框：1px纯黑；
}
影子：以前{
左-30%；
变换：歪斜（-23度）；
}
.影子：之后{
右图：-30%；
变换：歪斜（23度）；
}
.丝带{
宽度：70%；
位置：绝对位置；
左：50%；
身高：18%；
底部：-1px；
背景#7092BE；
边框：1px纯黑；
转化：translateX（-50%）；
z指数：1；
}
.ribbon:之前，
.ribbon:之后{
内容：''；
位置：绝对位置；
宽度：30%；
背景#7092BE；
身高：100%；
前-28%；
边框：1px纯黑；
}
.ribbon:之前{
左-30%；
变换：歪斜（23度）；
}
.ribbon:之后{
右图：-30%；
变换：歪斜（-23度）；
}
人力资源{
利润率：20px；
0
}

猫咪口头禅

猫咪口头禅

这是一个带有

skewY

的响应版本，我使用了

：pseudo

元素

*{
框大小：边框框；
}
.集装箱{
宽度：300px；
高度：300px；
保证金：0自动；
边框：1px纯黑；
位置：相对位置；
}
.内容{
背景：白色；
z指数：1；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
填充：15px；
}
.影子{
宽度：70%；
位置：绝对位置；
左：50%；
身高：18%；
底部：18%；
背景#7092BE；
边框：1px纯黑；
转化：translateX（-50%）；
z指数：-1；
}
影子：以前，
.影子：之后{
内容：''；
位置：绝对位置；
宽度：30%；
背景#7092BE；
身高：100%；
底部-28%；
边框：1px纯黑；
}
影子：以前{
左-30%；
变换：歪斜（-23度）；
}
.影子：之后{
右图：-30%；
变换：歪斜（23度）；
}
.丝带{
宽度：70%；
位置：绝对位置；
左：50%；
身高：18%；
底部：-1px；
背景#7092BE；
边框：1px纯黑；
转化：translateX（-50%）；
z指数：1；
}
.ribbon:之前，
.ribbon:之后{
内容：''；
位置：绝对位置；
宽度：30%；
背景#7092BE；
身高：100%；
前-28%；
边框：1px纯黑；
}
.ribbon:之前{
左-30%；
变换：歪斜（23度）；
}
.ribbon:之后{
右图：-30%；
变换：歪斜（-23度）；
}
人力资源{
利润率：20px；
0
}

猫咪口头禅

猫咪口头禅