Sınır Şeklinin Sınırı CSS ile

Question

this demo gibi bir efekti elde etmem gerekiyor.

Ancak, kullandığım kod çok özel ve çok temiz değil. Görebildiğiniz gibi, çok fazla element kullanmıştım ve bazı spesifik açı hesaplamaları ile dönüşümler yaptım.

Bu şekli oluşturmam, daha duyarlı bir şekilde tutmam için bir yol var mı? Lütfen sadece yarım daire istemediğimi, ancak uyarlayabileceğim çok özel bir açı olduğunu unutmayın. Yani daire dikdörtgenin içinde az ya da çok olabilir, bu yüzden yay açısı az ya da çok büyük olacaktır.

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> 

Puan Not:

ben z-index kullanamaz

1. öyleydi benim ilk çözüm ama neden diğer problemler.
2. Dikdörtgenin yüksekliği değişebilir ve bu nedenle yanıt vermek için buna ihtiyacım vardı, ancak kabın yüksekliği
3. daha büyük olsa bile, dairenin yüksekliği aynı kalmalıdır. seçeneği.

Answer 1

Genelde bu tür şekiller için SVG kullanılmasını öneririm çünkü arkları ile birlikte oluşturma ve koruma daha kolaydır. SVG'nin kullanılması ayrıca, yarıçap, arkın başlangıç ​​ve bitiş açıları vb. Üzerinde daha iyi kontrol anlamına da gelecektir, ancak diğer parçayı statik (çemberin yüksekliği) olarak tutarken, şeklin bir parçasını (dikdörtgen) yanıt verebileceğimizi düşünmüyorum. CSS kullanmak daha güvenli olabilir.

Ayrıca CSS'de bunu tek bir elemanla başarmak zordur, çünkü z-index'un kullanılamayacağını belirttiniz. Diğer yaklaşımlar (elemanın genişliğinden daha geniş veya ölçeği kullanarak genişlik kazanması gibi), eliptik bir yay ile sonuçlanır ve ayrıca yükseklik veya genişlik değiştiğinde konumlandırma özelliklerine göre ayarlamayı gerektirir.

Aşağıdakiler göz önünde bulundurulduğunda, birkaç öğeyi ve sözde öğeyi kullanan aşağıdaki yaklaşım en iyi seçenek olabilir. .inner öğesi, .rectangle'un sağ kenarının üstüne yerleştirilir ve genişliği, dairenin görüntülenmesini sağlamak için yeterlidir. .inner öğesinin içinde, daireyi oluşturan sözde öğe, dairenin yalnızca bir kısmının görünebilmesini (.inner'da gizli taşma nedeniyle) nedeniyle negatif bir sol ofsetle yerleştirilir. Çıkış duyarlı. Tam olarak ne yapar

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