CSS/jQuery - 是否有可能創建此形狀（類似倒圓形）

Question

我不知道如何在倒角中製作倒圓形之類的東西。爲了更好的理解，我附上了照片。

這甚至可能創建使用CSS3和jQuery的可能？

Answer 1

如何我會建議創建形狀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： 使用路徑元素，然後使用Bezier曲線命令。
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>

Answer 2

這裏的codepen鏈接（http://codepen.io/techsev/pen/dtAfB/）將教你如何使用附加的div並對它們進行造型來創建倒角。目前沒有辦法在沒有將其他框架附加到樣式表的情況下顛倒圓角。

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