Возможно ли сделать трапецию на CSS без border'а и сделать такую конструкцию

217

25 августа 2017, 22:45

Задача
Местоположение – круг разделен на 8 частей + еще одна в центре итого 9. Каждая эта часть указывает на район Москвы, как говорят: “Живу на 4 часа” т.е. юго-восток или 6 часов - юг, а центр – это садовое кольцо.

Так как этот фильтр находиться внутри form и должен отправляться выбранная значения, в html получается 9 скрытых radio прикрепленным на label, 8 трапеции 1 круг в центре.

С бордером не получается, они перекрывает друг друга, так как они на самом деле прямоугольник, но со скрытыми краями.

Возможно ли сделать такую конструкцию на CSS или на чем угодно?

Заранее спасибо!

Answer 1

В данном случае не обязательно делать 9 радио кнопок. Достаточно будет одного скрытого инпута, а значения в него передавать из атрибута выбранного svg-элемента.

Я бы сделал так с использованием jQuery:

var loc = $('#location'); 
$('.filter').on('click', function() { 
  $('.filter').attr('class', 'filter'); 
  $(this).attr('class', 'filter active'); 
  loc.val($(this).attr('data-location')); 
  console.log(loc.val()); 
});

.filter { 
  fill: #fff; 
  stroke: #d1d1d1; 
  transition: all 0.3s; 
} 
 
.filter:hover, 
.filter.active { 
  fill: #dcba89; 
  stroke: #dcba89; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="location"> 
  <svg xmlns="http://www.w3.org/2000/svg" width="103.313" height="103.375" viewBox="0 0 103.313 103.375"> 
    <path class="filter" data-location="8" stroke-width=".5" stroke-miterlimit="10" d="M51.661 51.688L15.309 15.336C25.347 5.297 37.464.278 51.661.278v51.41z"/> 
    <path class="filter" data-location="7" stroke-width=".5" stroke-miterlimit="10" d="M51.661 51.688H.25c0-14.197 5.02-26.314 15.058-36.353l36.353 36.353z"/> 
    <path class="filter" data-location="6" stroke-width=".5" stroke-miterlimit="10" d="M51.661 51.688L15.309 88.041C5.27 78.003.25 65.885.25 51.688h51.411z"/> 
    <path class="filter" data-location="5" stroke-width=".5" stroke-miterlimit="10" d="M51.661 51.688v51.41c-14.197 0-26.314-5.019-36.353-15.058l36.353-36.352z"/> 
    <path class="filter" data-location="4" stroke-width=".5" stroke-miterlimit="10" d="M51.661 51.688l36.353 36.353c-10.038 10.039-22.156 15.058-36.353 15.058V51.688z"/> 
    <path class="filter" data-location="3" stroke-width=".5" stroke-miterlimit="10" d="M51.661 51.688h51.41c0 14.196-5.019 26.314-15.058 36.353L51.661 51.688z"/> 
    <path class="filter" data-location="2" stroke-width=".5" stroke-miterlimit="10" d="M51.661 51.688l36.353-36.353c10.039 10.039 15.058 22.156 15.058 36.353H51.661z"/> 
    <path class="filter" data-location="1" stroke-width=".5" stroke-miterlimit="10" d="M51.661 51.688V.278c14.196 0 26.314 5.02 36.353 15.058L51.661 51.688z"/> 
    <circle class="filter" data-location="9" cx="52" cy="52" r="20"/> 
  </svg> 
  <input type="hidden" id="location" /> 
</div>