CSS / jQuery - 是否可以创建这个形状（像倒圆圈一样）

Question

我不知道如何在角落里做出倒圆的东西。我附上图片以便更好地理解。

甚至可以使用CSS3或jQuery创建吗？

Answer 1

此处的codepen链接（http://codepen.io/techsev/pen/dtAfB/）将教您如何使用其他div并对其进行整形以创建倒角。目前无法在不将其他框架附加到样式表的情况下反转圆角。

＆＃13;

＆＃13;

@import "compass/css3";

body {
  background-color: #fff;
}

.wrapper {
  overflow:hidden;
  width:200px;
  height:200px;
  
  
}

div.inverted-corner {
  box-sizing:border-box;
  position: relative;
  background-color: #3e2a4f;
  height: 200px;
  width: 200px;
  border: solid grey 7px;
}

.top, .bottom {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  
}

.top:before, .top:after, .bottom:before, .bottom:after{
  content:" ";
  position:absolute;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: solid grey 7px;
  border-radius: 20px; 
}

.top:before {
  top:-35px;
  left:-35px;
  
  
}

.top:after {
 top: -35px;
 right: -35px;
  box-shadow: inset 1px 1px 1px grey;
}

.bottom:before {
  bottom:-35px;
  left:-35px;
}

.bottom:after {
 bottom: -35px;
 right: -35px; 
 box-shadow: inset 1px 1px 1px grey;
}

＆＃13;

<div class="wrapper">
<div class="inverted-corner">
<div class="top">&nbsp; </div>
  <h1>Hello, use mult. divs inside a div to do this</h1>
  <div class="bottom"> </div>
</div>
  </div>

＆＃13;

＆＃13;

＆＃13;