CSS/jQuery - 是否可以创建此形状（类似于倒圆）

Question

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

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

Answer 1

codepen link 此处 (http://codepen.io/techsev/pen/dtAfB/) 将教您如何使用其他 div 并调整它们以创建倒角。如果不将额外的框架附加到样式，目前无法反转圆角 sheet。

@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;
}

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

Answer 2

我建议如何创建该形状 SVG。

Css解决方案：
使用与背景匹配的前后元素。

.shape {
  position: relative;
  width: 400px;
  height: 120px;
  background-color: cornflowerblue;
  text-align: center;
  color: white;
  line-height: 120px;
}
/*replace with "" if your going to use the code*/

.shape:before {
  content: "↙";
  font-size: 2.5em;
  text-indent: 35%;
  line-height: 0%;
  position: absolute;
  top: calc(100% - 20px);
  left: 0;
  width: 35%;
  height: 50%;
  background-color: white;
  border-top-right-radius: 15px;
}
.shape:after {
  content: "↘";
  line-height: 0%;
  text-indent: -43%;
  font-size: 2.5em;
  position: absolute;
  top: calc(100% - 20px);
  right: 0;
  width: 35%;
  height: 50%;
  background-color: white;
  border-top-left-radius: 15px;
}
.shape .extra {
  position: absolute;
  top: 100%;
  background-color: cornflowerblue;
  width: 30%;
  height: 30%;
  left: 35%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

<div class="shape">This is not a problem any more
  <div class="extra"></div>
</div>

SVG：使用路径元素，然后使用贝塞尔曲线命令。
MDN paths

<svg width="300px" viewbox="0 0 100 60">
  <path fill="cornflowerBlue" d="m 0,0 
                                 100,0 
                                 0,30
                                 -25,0
                                 c-5,0 -5,0 -5,5
                                 v20
                                 c0,5 0,5 -5,5
                                 h-30
                                 c-5,0 -5,0 -5,-5
                                 v-20
                                 c 0,-5 0,-5 -5,-5
                                 h-25z" />
</svg>

CSS/jQuery - 是否可以创建此形状（类似于倒圆）

CSS/jQuery - Is it possible to create this shape (something like inverted circle)

javascript

css

jquery

css-shapes