Bagaimana cara membuat latar belakang melingkar menggunakan css?
Saya perlu membuat sesuatu seperti ini. dan saya ingin melakukannya untuk <div></div> yang memiliki lebar di %
Saya dapat melakukan ini dengan menggunakan gambar dan menambahkan div lain di dalamnya dan z-index.
Tapi saya ingin tahu apakah mungkin untuk membuat lingkaran ini di backgroud menggunakan css.
Ini bisa dilakukan dengan menggunakan properti border-radius. pada dasarnya, Anda perlu mengatur border-radius tepat setengah dari tinggi dan lebar untuk mendapatkan lingkaran.
HTML
<div id="container">
<div id="inner">
</div>
</div>CSS
#container
{
height:400px;
width:400px;
border:1px black solid;
}
#inner
{
height:200px;
width:200px;
background:black;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left:25%;
margin-top:25%;
}
Anda dapat menggunakan kelas semu :before dan :after untuk meletakkan latar belakang berlapis-lapis pada sebuah elemen.
#divID : before {
background: url(someImage);
}
#div : after {
background : url(someotherImage) -10% no-repeat;
}
Jika Anda ingin melakukannya hanya dengan 1 elemen, Anda dapat menggunakan elemen semu ::before dan ::after untuk div yang sama sebagai pengganti wrapper.
Lihat http://css-tricks.com/pseudo-element-roundup/
