Инвертировать закругленный угол в CSS

218

17 апреля 2017, 03:07

У меня есть код css:

-moz-border-radius-topleft:50px;

Я получаю результат:

Есть ли какие-либо возможности сделать вот так:

Перевод вопроса: Invert rounded corner in CSS? @Mubeen

Answer 1

Вариант с использованием radial-gradient

body{ 
  background: url('http://i.imgur.com/RECDV24.jpg'); 
  background-size: cover; 
} 
div{ 
  width: 150px; 
  height: 150px;    
  background-image: radial-gradient(circle at 0 0, transparent 28px, tomato 28px); 
}

<div></div>

Вариант с использованием box-shadow

body { 
  background: url('https://i.imgur.com/RECDV24.jpg'); 
  background-size: cover; 
} 
 
div { 
  height: 150px; 
  width: 150px; 
  overflow: hidden; 
  position: relative;   
} 
div:before { 
  content: ''; 
  position: absolute; 
  height: 28px; 
  width: 28px; 
  border-bottom-right-radius: 100%; 
  box-shadow: 0 0 0 1000px tomato;   
  z-index: -1; 
}

<div></div>

Answer 2

Вы также можете использовать и inline svg и path element

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;} 
svg{width:30%;}

<svg viewbox="0 0 10 10"> 
  <path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/> 
</svg>

В этом примере я использую кубическую кривую Безье для инвертированного круглого края.

При таком подходе вы также можете заполнить форму изображением или градиентом:

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;} 
svg{width:30%;}

<svg viewbox="0 0 10 6.7"> 
  <defs> 
    <clipPath id="clip"> 
      <path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/> 
    </clipPath> 
  </defs> 
  <image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/> 
</svg>

Перевод ответа: Invert rounded corner in CSS? @web-tiki