Как можно нарисовать фигуры на css?

#css #css3

Привет всем,
Как я могу нарисовать на css что-то подобное на этом рисунке?
    

Ответы

Ответ 1

Круг - div с border-radius: 50%;

Отрезки - div с height: ...; width: ...;

Можно более аккуратно, но вот. На скорую руку:)



.circle {
  position: absolute;
  height: 100px;
  width: 100px;
  background: #ddd;
  border-radius: 50%;
  transition: ease 1s;
  /*for animation*/
}

#a {
  left: 0;
  top: 0;
}

#b {
  left: 500px;
  top: 0;
}

#c {
  left: 500px;
  top: 200px;
}

#d {
  left: 0;
  top: 200px;
}

#o {
  left: 225px;
  top: 75px;
  height: 150px;
  width: 150px;
}

.line {
  position: absolute;
  width: 240px;
  height: 2px;
  background: #ddd;
  transform: rotate(20deg);
}

#x {
  top: 80px;
}

#y {
  top: 80px;
  left: 350px;
  transform: rotate(-20deg);
}

#z {
  transform: rotate(-380deg);
  top: 220px;
}

#q {
  transform: rotate(380deg);
  top: 220px;
  left: 350px;
}