Инвертировать закругленный угол в CSS? - PullRequest
Новая
       42

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

27 голосов
/ 25 октября 2010

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

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

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

rounded corner

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

inverted rounded corner

Ответы [ 11 ]

17 голосов
/ 27 мая 2012

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

Леа Веру опубликовала решение

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

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

Решение Леа Веру

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);
}
16 голосов
/ 24 октября 2013

В современных браузерах вы можете использовать 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>

http://jsbin.com/eViJexO/1/

Кроме того, взгляните на http://www.html5rocks.com/en/tutorials/masking/adobe/,, в котором описано, как добиться аналогичного результата с помощью mask-box-image.

7 голосов
/ 13 апреля 2016

Вы также можете использовать встроенный 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>

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

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

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>
5 голосов
/ 15 марта 2014

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

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

Для IE8 вы можете рисовать границы выноски вместо теней.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 */
}

demo and visual of pseudo interaction

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

5 голосов
/ 10 июня 2011

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

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

Я отправил сообщение об ошибке (Feature Request) на сайте webkit - так как похоже, что оно еще не было подано.

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

3 голосов
/ 20 ноября 2018

Это можно сделать с радиальным градиентом . 

div {
  width: 20vw;
  height: 20vw;
  background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}
<div></div>

Ради интереса можно добавить дополнительные перевернутые углы, задав несколько фонов - по одному для каждого угла: 

div {
  width: 40vw;
  height: 40vw;
  position: relative;
  background-color: darkblue;
  --circle: radial-gradient(circle,white 8vw, darkblue 8.1vw);
}
div:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: var(--circle), var(--circle), var(--circle), var(--circle);
  background-size: 18vw 18vw;
  background-position: -40% -40%, 140% -40%, -40% 140%, 140% 140%;
  background-repeat: no-repeat;
}
<div></div>
1 голос
/ 14 июля 2012

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

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

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

0 голосов
/ 15 апреля 2016

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

0 голосов
/ 20 мая 2011

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

<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>

0 голосов
/ 25 октября 2010

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

Страница:
...