在div的大纲中得到一个间断

Question

我在div周围有一个轮廓，我想在右边框(我想让它看起来像什么样子)上休息一下。

我的HTML：

<div class="carouseldiv w-75 mx-auto pt-5 customer-box-shadow">
CONTENT
</div>

我的CSS：

.customer-box-shadow {
outline: 2px solid $red;
}

Answer 1

使用口罩，你也会有透明度。我用一个内在的阴影代替了轮廓

​

.customer-box-shadow {
  box-shadow: 0 0 0 2px inset red; /* you can also use border */
  padding:50px;
  -webkit-mask:
     /* adjust the 60% to control the height of the cut */
    linear-gradient(#000 0 0) right/2px 60% no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}


body {
  background:linear-gradient(90deg,#ccc,#fff)
}

<div class="customer-box-shadow">
  CONTENT
</div>

​

如果您想继续使用大纲，请考虑使用clip-path

​

.customer-box-shadow {
  --d: 2px; /* outline border */
  --c: 60%; /* the cut */
  outline: var(--d) solid red;
  padding:50px;
  clip-path:
   polygon(calc(-1*var(--d)) calc(-1*var(--d)),
          calc(100% + var(--d)) calc(-1*var(--d)),
          calc(100% + var(--d)) calc(50% - var(--c)/2),
          100% calc(50% - var(--c)/2),
          100% calc(50% + var(--c)/2),
          calc(100% + var(--d)) calc(50% + var(--c)/2),
          calc(100% + var(--d)) calc(100% + var(--d)),
          calc(-1*var(--d)) calc(100% + var(--d)))
}


body {
  background:linear-gradient(90deg,#ccc,#fff)
}

<div class="customer-box-shadow">
  CONTENT
</div>

​

Answer 2

用另一个div隐藏边界，如下所示：

​

.bordered{
  display: block;
  width: 100px;
  height: 100px;
  border: 1px gray solid;
  position: relative;
}

.overlay{
  width: 25px;
  height: 25px;
  position: absolute;
  right: -12.5px;
  top: calc(50% - 12.5px);
  background: #fff;
}

<div class="bordered">
  content ...
  <div class="overlay"></div>
</div>

​

Answer 3

不需要更改标记。使用伪元素 ::after来覆盖大纲中不需要的部分：

​

.customer-box-shadow {
  display: block;
  width: 100px;
  height: 100px;
  outline: 2px solid red;
  position: relative;
}

.customer-box-shadow::after {
  background-color: white;
  content: "";
  bottom: 30px; /* you might want a percentage here */
  right: -2px;
  width: 2px;
  top: 30px; /* you might want a percentage here */
  position: absolute;
}

<div class="customer-box-shadow">
  content ...
</div>

​