Прозрачный полуокруг, вырезанный из div

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

I не может использовать черный прямоугольник с белым кругом поверх него, потому что полукруг должен быть прозрачным и пропускать фон.

Желаемая форма:

Ответы

Ответ 1

Может быть, можно сделать это с помощью CSS :after псевдо-свойства, как это:

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 100px;
  height: 50px;
  top: -50px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.circle:after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -40px;
  border: 40px solid rgba(0, 0, 0, 0.5);
}

<div class="rect">&nbsp;<span class="circle"></span></div>

Ответ 2

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

body {
  background: url(http://i.imgur.com/qi5FGET.jpg) no-repeat;
  background-size: cover;
}
div {
  display: inline-block;
  width: 300px; height: 300px;
  position: relative;
  overflow: hidden;
}
div:before {
  content: '';
  position: absolute;
  bottom: 50%;
  width: 100%; height: 100%;
  border-radius: 100%;
  box-shadow: 0px 300px 0px 300px #000;
}
.transparent {
  opacity: 0.5;
}

<div></div>
<div class="transparent"></div>

Ответ 3

Использование SVG:

Вот альтернативное решение, использующее SVG (хотя вы не отметили его). Преимущества использования SVG:

Он имеет лучшую поддержку браузера по сравнению с радиальными градиентами.
SVG может поддерживать изображения внутри формы, в отличие от подхода box-shadow.

В то время как SVG не поддерживается <= IE8, тогда как box-shadow, могут быть предоставлены резервные копии.

svg {
  height: 150px;
  width: 150px;
}
polygon {
  fill: black;
}

/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<!-- Sample 1 - Using Clip Path -->
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
  <defs>
    <clipPath id='clipper'>
      <path d='M0,0 a50,50 0 1,0 100,0 l 0,100 -100,0' />
    </clipPath>
  </defs>
  <polygon points='0,0 100,0 100,100 0,100' clip-path='url(#clipper)' />
</svg>

<!-- Sample 2 - Using Path -->
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
  <pattern id='bg' width='100' height='100' patternUnits='userSpaceOnUse'>
    <image xlink:href='http://lorempixel.com/100/100/nature/1' height='100' width='100' />
  </pattern>
  <path d='M0,0 a50,50 0 1,0 100,0 l 0,100 -100,0 0,-100' fill='url(#bg)' />
</svg>

Ответ 4

Вы можете сделать это очень легко с помощью радиального градиента.

DEMO

Результат

HTML

<div class='shape'></div>

Соответствующий CSS:

.shape {
  margin: 0 auto;
  width: 10em; height: 16em;
  /* WebKit browsers, old syntax */
  background: -webkit-radial-gradient(50% 0, circle, transparent 30%, black 30%);

  /* IE10, current versions of Firefox and Opera */
  background: radial-gradient(circle at 50% 0, transparent 30%, black 30%);
}

Подробнее о совместимости см. http://caniuse.com/#feat=css-gradients.

Ответ 5

Кайл Севенокас сделал хорошую работу. И я построил это. Оформить заказ http://jsfiddle.net/FcaVX/1/

Я в основном рухнул белый div для круга и дал ему белые границы. Вопрос OP обсуждал элементы цвета, которые составляют форму; ничего о его границах правильно?

Ответ 6

Мне нужны закругленные углы только на нижней части отзывчивого изображения. Я начал с скрипта @sandeep и улучшил его для моих нужд:

            .rect
            {
                height: 85vh;
                    position: relative;
                background-color: red;
                width: 60vw;
            }

            .circle-helper{
                display: block;
                width: 100%;
                padding-bottom: 50%;
                bottom: 0;
                left: 0;
                overflow: hidden;
                position: absolute;
                background-color: transparent;

                    }
            .circle{
                display: block;
                width: 100%;
                padding-bottom: 100%;
                // height: 500px;
                bottom: 0;
                left: 0;
                overflow: hidden;
                position: absolute;
                background-color: transparent;
            }

            .circle:after{
                box-sizing: content-box;
                content: '';
                width: 100%;
                height: 100%;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                border-radius: 50%;
                background: rgba(0,0,0,0);
                position: absolute;
                transform: translate(-50%, -50%);
                top: 50%;
                left: 50%;
                border: 300px solid blue;
                }
                top: 50%
                left: 50%
                border: 300px solid blue

https://jsfiddle.net/mop00j22/

Ответ 7

Попробуй это.

body{
  
  background-color:#333;
  passing:0px;
  height:0px;
  
}
#app{
  background:#333 url('https://source.unsplash.com/random') no-repeat;
  background-size:cover;
  width:360px;
  height:560px;
  position:relative;
  overflow:hidden;
}
.app-bar{
  width:100%;
  height:50px;
  position:absolute;
  bottom:0px;
  left:0;
  
  
    
}

.app-bar .bar{
  line-height:50px;
  
  position:relative;
  width:100%;
  height:50px;
  background-image: radial-gradient(circle 35px at 315px 0, transparent 700px, #f44336 50px);
    
}


.app-bar .bar i{
  color:#FFF;
  display:block;
  line-height:50px;
  float:left;
  width:50px;
  text-align:center;
  cursor:pointer;
  margin-top:0px;
}
.app-bar .bar i:hover{
  background-color:rgba(0,0,0,.1);
}
.app-bar .bar button{
  padding:0px;
  box-sizing:border;
  text-align:center;
  margin:0px;
  bordeR:0px;
  outline:0px;
  width:60px;
  height:60px;
  line-height:60px;
  cursor:pointer;
  color:#FFFFFF;
  display:block;
  border-radius:50%;
  position:absolute;
  top:-30px;
  left:100%;
  margin-left:-75px;
  background-color:#f44336;
  transition: all .2s ease;
  
}
.app-bar .bar button span{
  line-height:60px;
  font-size:30px;
  
}
.app-bar .bar button:hover{
  transform:rotate(45deg);
  transition: all .2s ease;
}

<div id="app">
  <div class="app-bar">
    
    <div class="bar">
      <i class="material-icons">menu</i>
      <i class="material-icons">search</i>
      <button class="button">
        <span class="material-icons">add</span>
      </button>
    </div>
  </div>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" >

Ответ 8

Прямо сейчас, единственный способ, о котором я могу думать, - использовать много черных div-пикселей шириной в 1 пиксель рядом с eachother с разной высотой. Это технически возможно таким образом, но должно быть глубоко осуждено. Также; вы не будете иметь антиалиассинг, если не хотите, чтобы вы столкнулись с проблемой добавления 1x1 пиксельных разделов и вручную сглаживания.

Возможно, было бы более полезно, если бы вы приводили пример того, как вы хотели использовать это. Почему он должен быть только черным/прозрачным? Как было указано omarello, лучшим решением в большинстве случаев является, вероятно, простое изображение GIF или PNG с прозрачностью.