半圈與CSS

Question

我有一個帶雙重邊框的圓圈。 我需要像下面這樣的半圓（帶箭頭的部分）。

我創建了一個內圓並將其定位為絕對圓。 但是我無法在第一個圓圈中正確繪制該形狀。 我的結果就是這樣。 ：/

我該怎么辦？ 邊框必須是另一個div還是我可以直接繪制該形狀？

提前致謝。

我的第一個圈子代碼：

**.circle** {
border: 6px solid #F8DADA;
box-shadow:
inset 0 0 0 6px #F5A6A7;
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
margin-top: 40px;
border-radius: 50%;
width: 150px;
height: 150px;
background-color: #F25858;
display: table;
position: relative;
}

對於內圓或形狀：

**.inner-circle** {
position: absolute;
border-radius: 50%;
height: 70px;
width: 70px;
top: 95%;
left: 50%;
margin: -35px 0px 0px -35px;
box-shadow: inset 8px 35px 0 0px #E44D52;
}

更新：

所有解決方案都可以正常工作，但是Chrome可以通過內圓解決方案在幾秒鍾內做到這一點。 但是只是在我的項目中。 沒有第一個答案（：after）或小提琴的例子。 我想這是一種Chrome漏洞。

更新解決方案：

在第一個圓圈中，“ z-index：0”解決了最后一個問題。

Answer 1

將插圖更改為普通框陰影，並在它們之間交換了顏色。 並在偽選擇器之后使用。

 .circle{ border: 6px solid #F5A6A7; box-shadow:0 0 0 6px #F8DADA; -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ margin-top: 40px; border-radius: 50%; width: 150px; height: 150px; background-color: #F25858; display: table; position: relative; overflow:hidden; opacity: 0.99; z-index:999 } .circle:after{ content:'\\25BE'; text-align:center; position: absolute; border-radius: 50%; color:#fff; box-sizing:border-box; padding-top:10px; height: 70px; width: 70px; bottom: -38px; left: 26%; box-shadow: inset 8px 35px 0 0px #E44D52; } 

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

Answer 2

嘗試這個：

注意：如果要在IE，Firefox中支持代碼，則必須刪除display: table;

 .bigCir { border: 12px solid #F8DADA; text-align: center; border-radius: 50%; width: 150px; height: 150px; } .circle { border-radius: 50%; width: 100%; height: 100%; background-color: #F25858; box-shadow:0 0 0 6px #F5A6A7; position: relative; overflow: hidden; } .inner-circle { position: absolute; border-radius: 50%; height: 70px; width: 70px; top: 100%; left: 50%; margin: -35px 0px 0px -35px; box-shadow: inset 8px 35px 0 0px #E44D52; color: #FFF; font-size: 24px; } 

 <div class="bigCir"> <div class="circle"> <div class="inner-circle">↓</div> </div> </div> 

Answer 3

您可以使用background-color和radial-gradient做到這一點。

箭頭的一個元素和一個偽元素。

 div { width: 150px; height: 150px; border-radius: 50%; margin: 2em auto; border: 6px solid #F5A6A7; box-shadow: 0 0 0 6px #F8DADA; -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ background-color: #F25858; background-image: radial-gradient(circle at 50% 100%, red 20%, transparent 20%); position: relative; } div::after { position: absolute; bottom: 10px; left: 50%; content: '\\2193'; font-size: 1.25em; transform: translateX(-50%); color: white; transition: bottom .25s ease; } div:hover::after { bottom: 5px; } 

 <div></div>