使用css删除圆和矩形交叉处的边框

Question

是否可以在这两个形状周围绘制最终边框，而左边和右边没有圆圈的边框？

继承人到目前为止我所拥有的

<div class="site-header1">
  <div class="logo">
    <div class="text">
      <span>Class</span>
      <span>Class</span>
    </div>
    <div class="img"></div>
 </div>
</div>

CSS

.site-header1 .logo{
    position:relative;
    height: 80px;
}

.site-header1 .logo .text{
    padding: 10px;
    font-weight: lighter;
    font-family: 'Lato', sans-serif;
    font-size:1.5em;
    border-radius: 25px;
    background:white;
    border:1px solid rgba(0, 0, 0, 0.5);
    position:absolute;
    top: 17px;
}
.site-header1 .logo .text span+span{
    padding-left:75px;
}
.site-header1 .logo .img{
    border-radius: 100px;
    background:white;
    border:1px solid rgba(0, 0, 0, 0.5);
    position:absolute;
    left: 75px;
    top: 7px;
    height: 70px;
    width: 70px;
}

我在这里开始了一个小提琴http://jsfiddle.net/TH5E5/

Answer 1

虽然我相信您可以使用背景渐变来获得效果（something similar to what is done for this answer），但更简单的方法是......

使用伪元素作为边框

This fiddle seems to be what you want，在Chrome，Firefox和IE9中看起来不错。它将边框放在一个伪元素上以在主形状后面用边框推动圆，然后使用.img本身覆盖该形状的边框。这是你的css代码的变化部分（你的html和你拥有的一样，你的原始css也是如此）：

更改/添加CSS

.site-header1 .logo .img { /*this is the image itself */
    border-radius: 99px; /* 1px less than the border */
    background:white;
    border:0;
    position:absolute;
    left: 76px; /* 1px more than border below */
    top: 8px; /* 1px more than border below */
    height: 70px;
    width: 70px;
}
.site-header1 .logo:after { /*this is the image border */
    content: '';
    border-radius: 100px;
    background:white;
    border:1px solid rgba(0, 0, 0, 0.5);
    position:absolute;
    z-index: -1; /* push it behind */
    left: 75px;
    top: 7px;
    height: 70px;
    width: 70px;
}

使文本重叠图像

更改一些属性：

.site-header1 .logo .text {
    /* position: absolute; needs to be removed */
    display: inline-block;
    margin-top: 17px; /* this replaces the top: 17px when it was absolute */
}

然后添加以下内容以推送img：

上方的文本

.site-header1 .logo .text span {
    position: relative;
    z-index: 1;
}

See the result in this fiddle.