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

#html #css #css3 #svg

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

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


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

   

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

   

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

Ответы

Ответ 1

С 2010 года прошло достаточно много времени и уже можно использовать border-image.



body {
  background: linear-gradient(45deg, #acf, #afc) 0 0 / 33px 33px;
}

.fancy-border {
  width: 200px;
  height: 100px;
  border: 40px solid transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 60 60' width='120' height='120'%3E%3Cpath d='m 0 10a10 10 0 0 0 10-10h40a10
10 0 0 0 10 10v40a10 10 0 0 0-10 10h-40a10 10 0 0 0-10-10z' fill='%23fcc' fill-opacity='.6'/%3E%3Cpath
d='m5 15a15 15 0 0 0 10-10h30a15 15 0 0 0 10 10v30a15 15 0 0 0-10 10h-30a15 15 0 0
0-10-10z' fill='none' stroke='%23fff'/%3E%3C/svg%3E");
  border-image-slice: 40 fill;
  border-image-width: 40px;
}
Привет




Ответ скопирован с https://toster.ru/q/409258#answer_992741


Ответ 2

Вариант с использованием 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);
}





Вариант с использованием 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;
}



Ответ 3

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



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





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

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



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





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


Ответ 4

Еще одно решение, но им лучше не пользоваться

body {
  background: #fff;
}
.black-square {
  position: relative;
  background: #000;
  width:100px;
  height:100px
}
.black-square:before{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid #FFF;
    border-width: 10px;
    border-radius: 20px;
    background: #fff;
    clip: rect(auto auto 15px 15px);
    transform: rotate(90deg);
    top: -16px;
    left:-16px;
}


https://jsfiddle.net/7wepem63/3/