2

Я хочу создать фигуру, которую я бы описал как «круг наоборот»:

введите сюда описание изображения

Изображение сделано как-то неаккуратно, потому что черная линия должна продолжаться вдоль внешней границы элемента div.

Вот демонстрация того, что у меня есть на данный момент:

div {
    border: 1px solid black;
    background: grey;
}

#a {
    position: absolute;
    left: 0px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

#b {
    position: absolute;
    left: 110px;
    width: 200px;
    height: 100px;
    border-radius: 20px;
}
<div id="a"></div>
<div id="b"></div>

Возможно ли это с помощью CSS без изображений?

Свободный перевод вопроса CSS 3 Shape: “Inverse Circle” or “Cut Out Circle” от участника @Alp.

1

2 ответа 2

3

Немного страдает чёткость обводки, но если не ломать разметку, то можно реализовать следующим способом:

body {
  background: url(https://i.stack.imgur.com/raSfW.jpg) no-repeat;
  background-size: cover;
}

#a {
  position: absolute;
  left: 10px; z-index: 1;
  height: 100px; width: 100px;
  border-radius: 50%;
  background-color: grey;
}

#b {
  position: absolute;
  left: 60px;
  height: 100px; width: 200px;
  border-radius: 20px;
  background-image: radial-gradient( circle farthest-side at 5px 50px, #0000 59px, grey 60px);
}

#a, #b {
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000);
}
<div id="a"></div>
<div id="b"></div>

2

В этом подходе используются тени блоков CSS, которые поддерживаются IE9 + (canIuse).

DEMO

Результат:

введите сюда описание изображения

body{
    background: url(https://i.stack.imgur.com/raSfW.jpg) no-repeat;
    background-size:cover;
}
#a{
    overflow:hidden;
    border-radius:20px;
    position:relative;
    display:inline-block;
}
#a:before, #a:after{
    content:'';
    width: 100px;
    border-radius: 50%;
}
#a:before {
    height: 100px;
    float:left;    
    border: 1px solid black;
    background: grey;
}
#a:after {
    position:absolute;
    left:14px; top:-6px;
    height:114px;
    box-shadow: 1px 0px 0px 0px #000, 110px 0px 0px 68px #808080;
    background:none;
    z-index:-1;
}
#b {
    width: 200px;
    height: 100px;
    background:none;
    margin-left:-15px;
    border: 1px solid black;
    border-left:none;
    float:left;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
<div id="a">
    <div id="b"></div>
</div>

Свободный перевод ответа от участника @web-tiki.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.