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

204

14 апреля 2017, 21:27

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

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

<div class="circle" id="a"></div> 
<div class="circle" id="b"></div> 
<div class="circle" id="c"></div> 
<div class="circle" id="d"></div> 
 
<div class="circle" id="o"></div> 
 
<div class="line" id="x"></div> 
<div class="line" id="y"></div> 
<div class="line" id="z"></div> 
<div class="line" id="q"></div>