Html CSS-复合布局的圆角凹角

首先，我知道有类似的问题（比如），但它们并没有真正涵盖这种情况

这与单个单元格/div元素无关

我有三个块，其中包含一些文本内容：

顶部中间居中块（窄）

中间块（屏幕宽度）

底部中间居中块（窄）

基本上类似于十字架（删除文本）：

---

外角（8）是垂直的，但我如何才能实现这些内角（4）？

请参见下面的代码，可能需要一些调整，但想法是使用

伪元素来制作这些内边界

如果这是你想要的，请告诉我


.colored{
背景：黄色；
边框：5px纯绿色；
宽度：100px；
高度：100px；
框大小：边框框；
位置：相对位置；
}
#内容{
宽度：300px；
位置：相对位置；
背景：#000；
}
.top、.bottom{位置：相对；边距：0自动；清除：两个}
.top{边框底部：无}
.bottom{border-top:none}
.左{右边框：无}
.right{border left:无；}
.colored.center{边框：无；}
.left、.center、.right{float:left；}
.top{边框左上半径：10px；边框右上半径：10px；}
.bottom{边框左下半径：10px；边框右下半径：10px；}
.right{边框右下半径：10px；边框右上半径：10px；}
.left{边框左下半径：10px；边框左上半径：10px；}
.托普：以前{
位置：绝对位置；
身高：100%；
宽度：100%；
左-100%；
顶部：5px；
内容：“；
边框右下半径：10px；
右边框：5px纯绿色；
边框底部：5px纯绿色；
z指数：9999；
框大小：边框框；
}
.托普：之后{
位置：绝对位置；
身高：100%；
宽度：100%；
右图：-100%；
顶部：5px；
内容：“；
边框左下半径：10px；
左边框：5px纯绿色；
边框底部：5px纯绿色；
z指数：9999；
框大小：边框框；
}
.下：之前{
位置：绝对位置；
身高：100%；
宽度：100%；
左-100%；
底部：5px；
内容：“；
边框右上角半径：10px；
右边框：5px纯绿色；
边框顶部：5px纯绿色；
z指数：9999；
框大小：边框框；
}
.下：之后{
位置：绝对位置；
身高：100%；
宽度：100%；
右图：-100%；
底部：5px；
内容：“；
边框左上半径：10px；
左边框：5px纯绿色；
边框顶部：5px纯绿色；
z指数：9999；
框大小：边框框；
}
只有三个div的变体，有点老套，但功能强大。使用伪元素、变换和内框阴影


div{
背景色：#000；
最小高度：100px；
}
.中心{
宽度：100px；
保证金：0自动；
}
.四舍五入{
边界半径：20px；
边框：5px纯红；
}
康克先生{
位置：相对位置；
}
.conc：：之前，
.conc：：之后{
内容：''；
位置：绝对位置；
边框：5px纯红；
边界半径：20px；
宽度：25px；
高度：25px；
背景色：trnaspanret；
边框颜色：红色透明；
z指数：3；
方框阴影：白色0px 0px 0px 20px插图
}
.conc.bottom{
边缘底部：-5px；
边界底部：0；
边界半径：20px 20px 0
}
.conc.top{
页边顶部：-5px；
边界顶部：0；
边界半径：0 0 20px 20px
}
.conc：：之前{
左：-35px；
}
.conc：：之后{
右：-35px；
}
.conc.top：：之前，
.conc.top：：之后{
顶部：0px；
}
.conc.bottom：：之前，
.conc.bottom：：之后{
底部：0px；
}
.conc.bottom：：之前{
变换：旋转（135度）
}
.conc.bottom：：之后{
变换：旋转（-135度）
}
.conc.top：：之前{
变换：旋转（45度）
}
.conc.top：：之后{
变换：旋转（-45度）
}
.中心百叶窗{
位置：相对位置；
}
.centerblinders：：之前，
.centerblinders:：之后{
内容：''；
位置：绝对位置；
宽度：130px；
高度：20px；
背景色：#000；
左：50%；
转化：translatex（-50%）；
z指数：2；
}
.centerblinders:：之前{
顶部：-15px；
}
.centerblinders:：之后{
底部：-15px；
}

到目前为止，您尝试了什么？你需要发布你的代码，以便我们可以帮助你。为什么不使用背景图像。看起来或多或少符合我的要求，但在代码中，我希望只有一个“屏幕宽度”div，而不是三个（左、中、右）-这是可能的吗。另外，内角看起来不太合适。我不认为只有一个div是可能的。有太多的边框，你需要很多元素来制作这些边框。不仅是内部的，而且是所有的…………考虑到角落并不完美，这就是为什么我在回答中说：'也许它需要一些调整'。要使它们完美匹配，4个div的边框需要更短，但没有
边框高度
属性。我给你的代码，我想，这是你能用CSS做的最好的了