css

kullanarak Kavisli kutu

Ben hala aşağıdaki sonucu almadım, gibi tasarım yapmaya çalıştım, lütfen bana yardım edin. Herhangi bir yardım @Krusader tarafından yorum, sen konumunu ekleyebilirsiniz kullanmacss

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#rcorners1 { 
 
    border-radius: 10px 90px 90px 10px/8% 100% 100% 8%; 
 
    background: #18b1a0; 
 
    padding: 20px; 
 
    width: 200px; 
 
    height: 150px;  
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<p id="rcorners1">Rounded corners!</p> 
 
</body> 
 
</html>

kaynak

2017-10-17 Ganesh Putta

border-radius 'başlamak için bazı kod: 10px 90px 90px 10px /% 8% 100 % 100% 8; (https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) – Krusader

@Krusader Teşekkür ederiz, ih kodunuzla güncellemeyi yapın, ancak resimde gösterildiği gibi sol tarafa biraz koyu renkli ihtiyacım var. –

Bunun için bir 'psödo-element 'kullanın (': before' veya ': after') ve buradan oraya götürün – UncaughtTypeError

mutluluk duyacağız: bağıl; rcorners1'e. Ardından şu CSS ile sahte elemanını (:: sonra) ekleyin:

#rcorners1::after { 
content: ""; 
position: absolute; 
top: 10%; 
left: -15px; 
width: 30px; 
height: 80%; 
background-color: green; 
border-radius: 100%; 
}

Yani tam CSS şu şekilde görünecektir: Bu yardımcı olur

#rcorners1 { 
position: relative; 
background: #18b1a0; 
padding: 20px; 
width: 200px; 
height: 150px; 
border-radius: 10px 90px 90px 10px/8% 100% 100% 8%; 
overflow: hidden; 
} 
#rcorners1::after { 
content: ""; 
position: absolute; 
top: 10%; 
left: -15px; 
width: 30px; 
height: 80%; 
background-color: green; 
border-radius: 100%; 
}

Umut.

kaynak

2017-10-17 08:04:41

Will bu İşte ::

#rcorners1 { 
    border-radius: 10px ; 
    background: #18b1a0; 
    padding: 20px; 
    width: 200px; 
    height: 150px; 
    position: relative; 
} 

#rcorners1:after { 
    content: ''; 
    background: #18b1a0; 
    padding: 20px; 
    width: 10px; 
    height: 150px; 
    position: absolute; 
    right: -20px; 
    z-index: -1; 
    top: 0; 
    border-radius: 0px 36px 36px 0; 
}

kaynak

2017-10-17 08:08:55 aashi

yardımcı şekiller birçok türüdür. Ondan fikir alabilirsin. https://css-tricks.com/examples/ShapesOfCSS/

Ve senin kod güncellemesi

#rcorners1:after { 
 

 
    bottom: 10px; 
 
content: ""; 
 
position: absolute; 
 
top: 10px; 
 
left: 0; 
 
width: 50px; 
 
left: -35px; 
 
background-color: #098a7c; 
 
border-radius: 70px 100% 100% 70px; 
 
} 
 

 
#rcorners1 { 
 
position: relative; 
 
background: #18b1a0; 
 
padding: 20px; 
 
width: 200px; 
 
overflow: hidden; 
 
height: 150px; 
 
border-radius: 10px 130px 130px 10px/10px 100% 100% 10px; 
 
}

<p id="rcorners1">Rounded corners!</p>

kaynak

2017-10-17 09:02:33 Kumar

kullanarak olurdu sözde eleman olanlara Farklı bir çözüm radial-gradient (Krusader in the comments tarafından tavsiye edildiği gibi). İki farklı radial-gradient'u arka plan görüntüsü olarak birleştirebilirsiniz: soldaki koyu gölge için bir tane, diğeri de sağ kenardaki eğri için. Saydamlığın sona ermesiyle biraz oynamanız gerekebilir, bu yüzden çok keskin veya çok bulanık değil. Böyle

şey: Burada

@import url('https://fonts.googleapis.com/css?family=Inconsolata'); 
 

 
.box { 
 
    width: 190px; 
 
    height: 109px; 
 
    box-sizing: border-box; 
 
    font-family: Inconsolata; 
 
    font-size: 18px; 
 
    background-image: radial-gradient(circle at -52%, rgba(0,0,0,0.25) 36%, transparent 37%), 
 
        radial-gradient(circle at 29%, #18b1a0 88%, transparent 89%); 
 
    border-radius: 6px 25px 25px 6px; 
 
    color: white; 
 
    text-align:center; 
 
    padding-top:36px; 
 
}

<div class="box">SECRET<br/>CHAMBER</div>

kaynak

2017-10-18 01:45:23

\t #content { 
 
    \t \t border: 1px solid blue; 
 
    \t \t width : 400px; 
 
    \t \t height : 200px; 
 
    \t \t position: relative; 
 
    \t \t overflow: hidden; 
 
    \t } 
 

 
    \t #rconer-big, 
 
    \t #rconer-small { 
 
    \t \t display: inline-block; 
 
    \t \t width : 200px; 
 
    \t \t height : 100px; 
 
    \t \t border-top-right-radius: 50px; 
 
    \t \t border-bottom-right-radius: 50px; 
 
    \t \t margin : 0; 
 
    \t } 
 

 
    \t #rconer-big { 
 
    \t \t background-color: skyblue; 
 
    \t } 
 

 

 
    \t #rconer-small { 
 
    \t \t background-color: blue; 
 
    \t \t position: absolute; 
 
    \t \t top : 0; 
 
    \t \t left : -190px; 
 
    \t }

<div id="content"> 
 
\t \t <p id="rconer-big"></p> 
 
\t \t <p id="rconer-small"></p> 
 
</div>

kaynak

2017-10-18 14:39:13 WAEX

cevap

İlgili konular