Используйте CSS, чтобы пробить фон - PullRequest
Новая
       1

Используйте CSS, чтобы пробить фон

0 голосов
/ 08 января 2019

Вопрос действительно очень странный, поэтому позвольте мне объяснить его фрагментом: 

.container {
  width: 200px;
  height: 200px;
  background: rgba(200, 200, 200, .87);
}

.pin {
  position: absolute;
  left: 50px;
  top: 20px;
}

.overlay {
  position: absolute;
  left: 25px;
  top: 40px;
  background: grey;
  border: 1px solid white;
  padding: 12px;
  padding-top: 30px;
}

.overlay:before {
  content: '';
  position: absolute;
  border: 1px solid white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  top: -30px;
  left: 10px;
}
<div class="container">
  <div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l -85 150
        l -85 -150
      " fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  <div class="overlay">
    Content
  </div>
</div>

Как вы можете видеть в этом фрагменте, перед ним есть значок с некоторым содержимым.

Я бы хотел, чтобы булавка содержалась в белом круге, без содержимого, перекрывающего этот круг. Мол, если круг пробил содержимое и удалил небольшую его часть.

Я думал о создании SVG вместо DIV для контейнера контента (чтобы верхняя часть этого контейнера была на полкруга меньше), но я не уверен, подходит ли он для этого случая (контент будет быть динамичным, и ширина контента может измениться).

Есть ли способ достичь того, чего я хочу, только с помощью CSS?

Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 08 января 2019

Вы можете задать :: перед серой рамкой-тенью, чтобы заполнить .overlay. У .overlay есть overflow:hidden;, поэтому тень остается внутри. 

.container {
  width: 200px;
  height: 200px;
  background: rgba(200, 200, 200, .87);

}

.pin::before{
  content: '';
  position: absolute;
  border: 1px solid white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  top: -10px;
  left: -12px;
}

.pin {
  position: absolute;
  left: 50px;
  top: 20px;
}

.overlay {
  position: absolute;
  left: 25px;
  top: 40px;
  border: 1px solid white;
  border-top:none;
  padding: 12px;
  padding-top: 30px;
  overflow:hidden;
  z-index:1
}

.overlay:before {
  content: '';
  position: absolute;
  border: 1px solid white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  top: -30px;
  left: 12.3345px;
  background:transparent;
  box-shadow: 0 0 0 100px grey;
  z-index:-1;
}
<div class="container">
  <div class="overlay">
    Content
  </div>
  <div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l -85 150
        l -85 -150
      " fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  
</div>
0 голосов
/ 08 января 2019

Поскольку оверлей принадлежит элементу, вы можете рассмотреть радиальный градиент и переменную CSS, чтобы иметь что-то динамическое (без рамки).

Я удалил штифт для простоты, но вы можете легко отрегулировать его положение, чтобы сделать его внутри круга, или использовать его в качестве фона элемента наложения: 

.container {
  width: 200px;
  height: 120px;
  background: linear-gradient(red,yellow);
  display: inline-block;
  position: relative;
}

.overlay {
  --top: -3px;
  --left: 35px;
  --radius: 24px;
  position: absolute;
  left: 25px;
  top: 40px;
  background: radial-gradient(circle at var(--left) var(--top), transparent 0, transparent var(--radius), grey var(--radius));
  padding: 12px;
  padding-top: 30px;
}

.overlay:before {
  content: '';
  position: absolute;
  border: 1px solid white;
  width: calc(2*var(--radius));
  height: calc(2*var(--radius));
  border-radius: 50%;
  top: var(--top);
  left: var(--left);
  transform: translate(-50%, -50%);/*to keep the same origin*/
  background:url('data:image/svg+xml;utf8,<svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg"><path d=" M11 138 a 94 94 0 1 1 170 0 l -85 150 l -85 -150" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" /></svg>') center no-repeat;
}
<div class="container">
  <div class="overlay">
    Content
  </div>
</div>
<div class="container">
  <div class="overlay" style="--top:10px;--left:5px">
    Content
  </div>
</div>

<div class="container">
  <div class="overlay" style="--top:50px;--left:5px;--radius:30px;">
    Content
  </div>
</div>
<div class="container">
  <div class="overlay" style="--top:50px;--left:50px;--radius:40px;">
    Content
  </div>
</div>
<div class="container">
  <div class="overlay" style="--top:50px;--left:120px">
    Content
  </div>
</div>

Вы также можете использовать маску, если вам нужен какой-либо фон: 

.container {
  width: 200px;
  height: 120px;
  background: linear-gradient(red,yellow);
  display: inline-block;
  vertical-align:top;
  position: relative;
  --top: -3px;
  --left: 35px;
  --radius: 24px;
}
.pin {
  position:absolute;
  text-align:center;
  border: 1px solid white;
  width: calc(2*var(--radius));
  height: calc(2*var(--radius));
  border-radius: 50%;
  top: calc(40px + var(--top));
  left: calc(25px + var(--left));
  transform: translate(-50%, -50%);/*to keep the same origin*/
}
svg {
 margin-top:10px;
}
.overlay {
  position: absolute;
  left: 25px;
  top: 40px;
  -webkit-mask-image: radial-gradient(circle at var(--left) var(--top),     transparent 0, transparent var(--radius), black var(--radius));
  background: linear-gradient(yellow,blue);
  padding: 12px;
  padding-top: 30px;
}

.overlay:before {
  content: '';
  position: absolute;
  border-radius: 50%;
}
<div class="container">
  <div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l -85 150
        l -85 -150
      " fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  <div class="overlay">
    Content
  </div>
</div>
<div class="container" style="--top:50px;--left:5px;--radius:30px;">
<div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l -85 150
        l -85 -150
      " fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  <div class="overlay" >
    Content
  </div>
</div>

<div class="container" style="--top:50px;--left:5px;--radius:30px;">
<div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l -85 150
        l -85 -150
      " fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  <div class="overlay" >
    Content
  </div>
</div>
<div class="container" style="--top:50px;--left:50px;--radius:40px;">
<div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l -85 150
        l -85 -150
      " fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  <div class="overlay" >
    Content
  </div>
</div>
<div class="container" style="--top:50px;--left:120px">
<div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l -85 150
        l -85 -150
      " fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  <div class="overlay" >
    Content
  </div>
</div>
0 голосов
/ 08 января 2019

Это возможно при использовании маски изображения с использованием радиального градиента (не поддерживается IE или Edge <18) </p> 

.container {
  width: 200px;
  height: 200px;
  background: rgba(200, 200, 200, .87);
}

.pin {
  position: absolute;
  left: 50px;
  top: 20px;
}

.overlay {
  position: absolute;
  left: 25px;
  top: 40px;
  background: grey;
  border: 1px solid white;
  padding: 12px;
  padding-top: 30px;
}

.overlay:before {
  content: '';
  position: absolute;
  border: 1px solid white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  top: 0;
  transform: translateY(-50%);
}

.masked-circle {
  -webkit-mask-image: radial-gradient(circle at 50% 0%, transparent 0, transparent 25px, black 25px);
}
<div class="container">
  <div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l -85 150
        l -85 -150
      " fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  <div class="overlay masked-circle">
    Content
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...