Html 如何使子div边框覆盖父div边框的一角？

我正在尝试制作一个如图所示的盒子

但是我的小盒子的边框放在大盒子里面，而不是放在大盒子的边框上面

我需要这样做，使粉红色的小“鸡”盒是坐在右上角的大灰色框的权利

课程作业1
* {
框大小：边框框；
边际：0px；
字体系列：Helvetica、Arial、无衬线字体；
线高：1.3；
}
h2.鸡肉{
背景色：#D59898；
边框：2件纯黑；
文本对齐：居中；
宽度：100px；
保证金：0px 10px 0px 0px；
浮动：对；
右边距：0px；
}
小鸡{
背景颜色：灰色；
边框：2件纯黑；
宽度：30%；
位置：相对位置；
}
p、 鸡{
清楚:对,；
填充：10px；
}
我们的菜单
鸡
间距：注意实体模型插图中显示的间距。注意截面之间的间距（水平和垂直）。请注意剖面边缘与浏览器窗口边缘之间的水平间距。此外，请注意每个部分中的虚拟文本与部分边缘之间的间距。最后，确保虚拟文本“向下推”到足够的程度，以便

2个简单选项：

注意：来自父级和子级的边框不会像在表布局中那样折叠，它们需要删除。。。第101期

• 不绘制右上角边框（如果颜色相同）

课程作业1
* {
框大小：边框框；
边际：0px；
字体系列：Helvetica、Arial、无衬线字体；
线高：1.3；
}
h2.鸡肉{
背景色：#D59898；
边框：2件纯黑；
边界顶部：无；
边界权：无；
文本对齐：居中；
宽度：100px；
保证金：0px 10px 0px 0px；
浮动：对；
右边距：0px；
}
小鸡{
背景颜色：灰色；
边框：2件纯黑；
宽度：30%；
位置：相对位置；
}
p、 鸡{
清楚:对,；
填充：10px；
}
我们的菜单
鸡
间距：注意实体模型插图中显示的间距。注意截面之间的间距（水平和垂直）。请注意剖面边缘与浏览器窗口边缘之间的水平间距。另外，请注意
每个部分中的虚拟文本与部分边缘之间的间距。最后，确保虚拟文本“向下推”到足够的程度，以便

使用负边距：

    margin: -10px -10px 0px 0px;

完整代码：

*{
框大小：边框框；
边际：0px；
字体系列：Helvetica、Arial、无衬线字体；
线高：1.3；
}
h2.鸡肉{
背景色：#D59898；
边框：2件纯黑；
文本对齐：居中；
宽度：100px；
余量：-10px-10px 0px 0px；
浮动：对；
}
小鸡{
背景颜色：灰色；
边框：2件纯黑；
宽度：30%；
位置：相对位置；
}
p、 鸡{
清楚:对,；
填充：10px；
}

我们的菜单
鸡
间距：注意实体模型插图中显示的间距。注意截面之间的间距（水平和垂直）。请注意剖面边缘与浏览器窗口边缘之间的水平间距。此外，请注意每个部分中的虚拟文本与部分边缘之间的间距。最后，确保虚拟文本“向下推”到足够的程度，以便

这是一个简单的，设置为较小的框边框左下、右上将取自父项：）谢谢，我最初确实尝试过这个，但使用了错误的边框技术：0px 0px 2px 2px；谢谢你告诉我正确的方法！只需在

h2中添加
border right:0
和
border top:0
。chicken

不需要负边距，只需删除不能与父边界折叠的边界即可。@G-Cyrillus I认为这两种方法同样有效地完成任务。从折叠的边上删除边框可能会更好一些，因为它更具语义，但我觉得这是一种分裂：-）@TylerH负边距需要纠正以前不需要的规则；），我的观点是尽量简化。没有IE6来证明计数器规则的合理性，我们也有位置：相对或变换来移动它，那么var（）CSS就可以使用，所以如果修改边框大小，就不需要重置margin/top/right/translate（）的偏移值；）我回答的问题是：如果盒子在上面，有负的边距，那么鸡肉的整个边框可能是另一种颜色，这取决于它的设计目标。