Question

我正在尝试创建一个带有缩进角的矩形。所以我有一个相对定位的矩形，背景为彩色。然后，我绝对在每个角落定位一个圆圈，这给人以矩形的缩进角落的印象。只要我将背景颜色保留在矩形上并且圆圈为白色，与页面背景相匹配，这就很有效。

但是我希望矩形和圆圈的背景都是白色的，与页面背景相匹配，并且两者都有边框。但是当我这样做时，矩形的边框出现在圆圈周围。我已经尝试过z-index，但这不起作用。有什么建议？谢谢。

以下是相关代码：

<style>
#rect {width:200px; height: 300px;background-color: #fff;position: relative;overflow: hidden;     border:1px solid #747474;}
.circle {border-radius: 50%; background-color: #fff; border: 1px solid #747474; width: 50px;height:  50px;position: absolute;}
.topleft {top: -10px;left: -10px;}
.topright {top: -10px;right: -10px;}
.bottomleft {bottom: -10px;left: -10px;}
.bottomright {bottom: -10px;right: -10px;}
</style>
</head>
<body>
<div id ="rect">
<div class ="circle topleft"></div>
<div class ="circle topright"></div>
<div class ="circle bottomleft"></div>
<div class ="circle bottomright"></div>

</div>

Answer 1

您可以使用

#rect {
    border: none; // default value
}
#rect:before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border:1px solid #747474;
}

Demo

问题是，对于overflow: hidden，圈子不能与#rect的边界重叠。然后，删除该边框并将其添加到伪元素中。

Answer 2

略有不同的方法 - FIDDLE。

CSS

#rect {
    width:200px; 
    height: 300px;
    position: relative;
    overflow: visible;
    border:1px solid #747474;
}
.circle {
    border-radius: 50%; 
    background-color: white; 
    border: 1px solid white; 
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 9999;
}
.topleft {
    top: -52px;
    left: -52px;
    border-right-color: black;
    transform: rotate(45deg);
}
.topright {
    top: -52px;
    left: 150px;
    border-left-color: black;
    transform: rotate(-45deg);
}
.bottomleft {
    top: 250px;
    left: -52px;
    border-right-color: black;
    transform: rotate(-45deg);
}
.bottomright {
    top: 250px;
    left: 150px;
    border-top-color: black;
    transform: rotate(-45deg);
}

css - 只有四分之一圆形的边框？

2 个答案: