圈在使用CSS

Question

我想設計（圓形和矩形之間的效應）類似如下面的圖像的形狀的長方形：

我知道圓形使用邊界半徑設計和類似矩形的形狀被設計成具有樣式的一些無序列表顯示：塊。但是我無法理解如何將圓形保留在矩形上，以便看起來矩形的某些部分被圓形的圓形切割（圓形和矩形之間的白色空間）。

我試過盒子陰影，輪廓，溢出等，但它不工作。
任何人都可以告訴我如何設計一個形狀像圖像？ - 謝謝

Answer 1

這樣的事情？ http://codepen.io/anon/pen/VvqRep

.rectangle{ 
    display:block; 
    height:40px; 
    width:150px; 
    background:red; 
    position:relative; 
    margin-top:100px; 
} 

.circle{ 
    position:absolute; 
    height:40px; 
    width:40px; 
    border-radius:40px; 
    border:3px solid white; 
    left:50%; 
    margin-left:-25px; 
    top: -20px; 
    background:red; 
} 

使用圓上的邊框可以實現「截斷」效果。

如果我的asnwser幫助過你，請你選擇它嗎？感謝

Answer 2

你可以試試這個：

.rectangle{ 
    display:block; 
    height:50px; 
    width:150px; 
    background:red; 
    position:relative; 
    margin-top:100px; 
    border-top-left-radius: .5em; 
    border-top-right-radius: .5em; 
} 

.circle{ 
    position:absolute; 
    height:40px; 
    width:40px; 
    border-radius:40px; 
    border:3px solid white; 
    left:50%; 
    margin-left:-25px; 
    top: -20px; 
    background:red; 
} 

DEMO HERE

Answer 3

#bg { 
 
    position: relative; 
 
    background: red; 
 
    width: 200px; 
 
    height: 50px; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    margin-top: 50px; 
 
} 
 
#circle { 
 
    position: absolute; 
 
    background: red; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    left: 0; 
 
    right: 0;  
 
    top: -50px; 
 
    width: 75px; 
 
    height: 75px; 
 
    border: 3px solid #fff; 
 
    border-radius: 50%; 
 
}

<div id="bg"> 
 
    <div id="circle"></div> 
 
</div>

Answer 4

檢查了這一點:)

.base{ 
 
    height:80px; 
 
    width:300px; 
 
    background:#d33; 
 
    position:relative; 
 
    margin-top:100px; 
 
    border-top-left-radius: 10px; 
 
    border-top-right-radius: 10px; 
 
} 
 

 
.circle{ 
 
    position:absolute; 
 
    height:100px; 
 
    width:100px; 
 
    border-radius:50%; 
 
    border:3px solid white; 
 
    left:50%; 
 
    margin-left:-55px; 
 
    top: -40px; 
 
    background: #d33; 
 
}

<div class="base"> 
 
    <div class="circle"></div> 
 
</div>

Answer 5

使用這樣的：HTML和CSS代碼：

CSS：

#rectangle { 
    width:300px; 
    height:70px; 
    position: relative; 
    background: #cc0000; 
    border-radius: 5px 5px 0 0; 
} 
#rectangle #circle { 
    width:70px; 
    height:70px; 
    position: absolute; 
    top:-35px; 
    background:#cc0000; 
    border:1px solid #fff; 
    border-radius:70px; 
    left: 50%; 
    margin-left: -35px; 
} 

HTML：

<div id="rectangle"> 
    <div id="circle"></div> 
</div>