在CSS中反转圆angular？
我有一个CSS代码：
-moz-border-radius-topleft:50px; 我得到的结果是：
有没有这样的可能性：
只是为了更新这个，似乎你可以用多种方式。
Lea Verou发布了一个解决scheme
这是我的使用边界图像
使用边框图像
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(160wpb4.png) 55 repeat; -webkit-border-image: url(160wpb4.png) 55 repeat; -o-border-image: url(160wpb4.png) 55 repeat; border-image: url(160wpb4.png) 55 repeat; margin: 50px auto; }
使用径向渐变
Lea Verou的解决scheme
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); }
在现代浏览器中，您可以使用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>
你也可以使用和内联svg的path元素 ：
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>
不幸的是，目前还没有一个基于官方或实施的CSS规范:(
但是，正如其他人所补充的那样，为了使用JS库或复杂的HTML / CSS实现来实现相同的效果，可以使用一些解决scheme（或秘籍？）。 我遇到了这个问题，同时寻找一种比OP更复杂的angular落，而不使用图像。
我已经在webkit站点上提交了一个bug（Feature Request） – 因为似乎没有一个已经存在的文件。
Bug 62458 – function要求：倒圆angular
对于一个普通的背景颜色，实际上可以使用伪元素和方块阴影来绘制背景颜色， 而不会隐藏父容器的背景，您将实际看到它们 。
你需要的是一个浏览器，可以理解：之前/：之后和箱子阴影:) …
对于IE8，你可以画阴影而不是阴影。 http://codepen.io/anon/pen/fFgDo
盒子阴影方法： 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进行转换，并设置其元素中的任何位置以绘制类似的洞：示例： http : //codepen.io/gc-nomade/pen/nKAka
有些方法可以通过使用CSS来解决这个问题 – 但是如果你有一个背景模式，它将取决于你的背景颜色（如果可靠的话），它可能稍微复杂一点。
我在这里介绍了如何在CSS中创build反向边界半径的基本示例（此处） 。 这使用一个大小为Border的技巧来使用里面，但是你可能需要做一些定位来让它正常工作，但是你可以看到它的可能。 特别是如果您为每个span指定background-color 。
如果你想要所有的四个angular落，你将不得不为你的div中的每个span添加一个单独的类，每个类将模拟一个angular落，左上angular，右上angular等。
不，如果你有坚实的背景，你可以使用CSS来创build咬合。
否则，使用PNG就没有什么特别的地方可以做，就像在border-radius之前创build圆angular一样。
其实有一个办法，像这样：
<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>
它可以使用after元素来完成。 检查这个jsfiddle链接 enter code here
不，那里没有。
