使用CSS限制圖形的邊框

但我在那裏使用的代碼太具體，不太乾淨。正如你所看到的，我已經使用了相當多的元素，並且還進行了一些非常具體的角度計算。

有沒有一種方法可以讓我創建這種形狀，保持響應，但以更清潔的方式？請注意，我不想只有半圈，但我可以適應一個非常具體的角度。我的意思是這個圓或多或少都在矩形內，所以圓弧的角度會更大或更小。

CSS：

.rectangle { 
    background-color: white; 
    width:200px; 
    height:200px; 
    border:solid 1px navy; 
} 
.circle { 
    position: relative; 
    width: 70px; height: 70px; 
    border-radius: 50%; 
    background: white; 
    margin-top:calc(50% - 35px); 
    margin-left:calc(100% - 50px); 
} 
.arc { 
    overflow: hidden; 
    position: absolute; 
    top: -1px; right: 50%; bottom: 50%; left: -1px; 
    transform-origin: 100% 100%; 
    transform: rotate(115deg); 
} 
.arc:before { 
    box-sizing: border-box; 
    display: block; 
    border: solid 1px navy; 
    width: 200%; height: 200%; 
    border-radius: 50%; 
    content: ''; 
} 

.arc2 { 
    overflow: hidden; 
    position: absolute; 
    top: -1px; right: 50%; bottom: 50%; left: -1px; 
    transform-origin: 100% 100%; 
    transform: rotate(155deg); 
} 
.arc2:before { 
    box-sizing: border-box; 
    display: block; 
    border: solid 1px navy; 
    width: 200%; height: 200%; 
    border-radius: 50%; 
    content: ''; 
}

HTML：

<div class='rectangle'> 
    <div class='circle'> 
    <div class='arc'></div> 
    <div class='arc2'></div> 
    </div> 
</div>

注意事項：

我不能使用的z-index，這是我的第一個解決方案但它導致還有其他問題。
矩形的高度可以改變，所以我需要它的響應度，但即使容器的高度變大，圓的高度也應該保持不變
如果是的話，我可以使用SVG選項。

來源

2016-03-23 Titozzz

到底是什麼_意味着「我可以適應一個非常特殊角」？ –

請簡要說明，人們很可能會寫出一些答案，而不是什麼？！立即解釋你的想法。 –

相關：http：// stackoverflow。com/questions/21687326 @ can-i-make-an-irregular-div-shape-using-only-css – TylerH

我通常會推薦使用SVG來處理這些形狀，因爲它更容易創建和維護弧線。使用SVG也意味着可以更好地控制半徑，弧線的起始角度和結束角度等，但我認爲我們不能讓部分形狀響應（矩形），同時將其他部分保持爲靜態（圓形高度），因此使用CSS可能更安全。

在CSS中，使用單個元素很難實現這一點，因爲您已經指出z-index無法使用。其他方法（如使元素的寬度大於高度或使用比例）將導致橢圓弧，並且還需要調整高度或寬度更改時的屬性定位。

考慮到所有那些使用幾個元素和僞元素的下面的方法可能是最好的選擇。 .inner元素放置在.rectangle的右邊界上方，其寬度恰好足以顯示圓。在.inner元素的內部，創建圓的僞元素被放置爲具有負的左偏移，以便只有一部分圓是可見的（由於在.inner上隱藏了溢出）。輸出響應。

.rectangle { 
 
    position: relative; 
 
    background-color: white; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: solid 1px navy; 
 
} 
 
.inner { 
 
    position: absolute; 
 
    left: 100%; 
 
    top: -1px; 
 
    height: calc(100% + 2px); 
 
    width: 30px; 
 
    overflow: hidden; 
 
} 
 
.inner:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 70px; 
 
    height: 70px; 
 
    border-radius: 50%; 
 
    background: white; 
 
    top: calc(50% - 35px); 
 
    left: -45px; 
 
    border: 1px solid navy; 
 
} 
 

 
/* Just for demo */ 
 

 
.rectangle { 
 
    transition: all 1s ease; 
 
} 
 
.rectangle:hover { 
 
    height: 400px; 
 
}

<div class='rectangle'> 
 
    <div class="inner"></div> 
 
</div>

來源

2016-03-25 15:24:50 Harry

使用CSS限制圖形的邊框

回答

相關問題