Как сделать круговой фон с помощью css?

Мне нужно сделать что-то подобное. и я хочу сделать это для <div></div>, у которого width в %

Я могу сделать это, используя изображение и добавив еще один div внутри и z-index.

Но я хочу знать, можно ли сделать в этом круге в backgroud с помощью css.

Ответ 1

Держите его простым:

.circle
  {
    border-radius: 50%;
    width: 200px;
    height: 200px; 
  }

Ширина и высота могут быть любыми, если они равны

Ответ 2

Обратите внимание на следующий css. Демо

.circle { 
   width: 140px;
   height: 140px;
   background: red; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

Для получения дополнительных форм вы можете следить за следующими URL-адресами:

http://davidwalsh.name/css-triangles

Ответ 3

Это можно сделать, используя свойство border-radius. в основном, вам нужно установить радиус границы ровно на половину высоты и ширины, чтобы получить круг.

JSFiddle

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%;
}

Ответ 4

Градиенты?

div {
  width: 400px; height: 400px;
  background: radial-gradient(ellipse at center,  #f73134 0%,#ff0000 47%,#ff0000 47%,#23bc2b 47%,#23bc2b 48%);
}

https://fiddle.jshell.net/su5oyd4L/

Ответ 5

Вы можете использовать псевдоклассы :before и :after, чтобы поместить многоуровневый фон в элемент.

#divID : before {
    background: url(someImage);
}

#div : after {
    background : url(someotherImage) -10% no-repeat;
}

Ответ 6

Здесь - это решение для этого с помощью одного элемента div со свойствами CSS, border-radius делает магию.

CSS

.circle{
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    text-align:center;
    background:#000
}

HTML:

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

Ответ 7

Если вы хотите сделать это только с одним элементом, вы можете использовать элементы:: before и:: после псевдоэлементов для одного и того же div вместо оболочки.
См. http://css-tricks.com/pseudo-element-roundup/