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

Ответ 1

Просто для обновления, кажется, вы можете несколькими способами.

Lea Verou опубликовала решение

Вот мое использование border-image

Использование изображения рамки

HTML

<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>

CSS

div {
    width: 200px;           
    border-width: 55px;
    -moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    margin: 50px auto;   
}

Использование радиального градиента

Решение Lea Verou

HTML

<div class="inner-round"></div>

CSS

.inner-round {
    background-image:
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}

Ответ 2

В современных браузерах вы можете использовать mask-image:

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

<div id="aux-container"></div>

Ответ 3

Вы также можете использовать inline svg с элементом :

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>

Ответ 4

К сожалению, в настоящее время не существует решения на основе официальных или реализованных спецификаций CSS: (

Однако, как добавили другие люди, существуют возможные решения (или читы?), которые вы можете сделать для достижения такого же эффекта с использованием JS-библиотек или сложных реализаций HTML/CSS. Я столкнулся с этим вопросом, ища способ сделать еще более сложные углы, чем OP без использования изображений.

Я зарегистрировал ошибку (Feature Request) на сайте webkit - поскольку, похоже, не было уже зарегистрировано.

Ошибка 62458 - Запрос функции: Обратные закругленные углы

Ответ 5

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

Вам нужен браузер, который понимает: before/: after и box-shadow:)...

Для IE8 вы можете рисовать границы hudge вместо теней. http://codepen.io/anon/pen/fFgDo

подход box-shadow: http://codepen.io/anon/pen/FwLnd

div {
  margin:2em; /* keep it away from sides to see result */
  padding:2em;/* for test to size it when empty */
  position:relative; /* reference to set pseudo element where you wish */
  overflow:hidden;/* you do not want the box-shadow all over the page */
}
div:before {
  content:'';
  position:absolute;
  width:80px;
  height:80px;
  top:-40px;
  left:-40px;
  border-radius:100%;
  box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */
}

псевдоэлемент может принимать любую форму и преобразовывать через css и устанавливать любое место в своем элементе, чтобы нарисовать вид отверстий через: examples: http://codepen.io/gc-nomade/pen/nKAka

Ответ 6

Есть способы решить эту проблему, используя только CSS - однако это будет зависеть от цвета вашего фона (если это будет проще), если у вас есть шаблон для фона, он может быть немного сложнее.

В качестве примера я расскажу о том, как сделать обратный радиус границы в CSS (здесь). Это использует трюк с размером Border для использования внутри, вам может потребоваться некоторое позиционирование, чтобы заставить его работать правильно, но, как вы можете видеть, это возможно. Особенно, если вы укажете background-color для каждого span.

Если вам нужны все 4 угла, вам нужно будет добавить отдельный класс для каждого span внутри вашего div, и каждый класс будет имитировать угол, верхний левый, верхний правый и т.д.

Ответ 7

Нет. Если у вас сплошной фон, вы можете использовать css для создания укуса.
В противном случае нет ничего особенного, что вы можете сделать, используя PNG, так же, как вы создавали бы круглые углы до border-radius.

Ответ 8

на самом деле там один путь, например:

<div style="background-color: red;height: 12px; width: 12px;">
    <div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
        -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
    </div>
</div>

но как @Domenic говорит, что вам нужен сплошной фон, в противном случае вы получите следующее:

<div style=" background-color:#666">
  <div style="background-color: red;height: 12px; width: 12px;">
    <div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
        -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
    </div>
</div>

Ответ 9

Это можно сделать с помощью элемента after. проверьте эту ссылку jsfiddle enter code here

Ответ 10

Нет, нет.