3

Estou com dificuldade em fazer as linhas em um botão redondo para ser igual as partições de uma pizza Segue imagem de como preciso fazer

o que eu tenho :

            <div class="panel-body no_padding padding_bottom_top_list" style="display: inline-block;">
                <div class="list-group">
                    <div class="list-group-item list_group_item_padding">
                        <div class="row-action-primary padding_right_list" style="text-align:center">
                            <button class="btn btn-fab  green_status2" style="width:60px; height:60px; font-size:30px; color:white; "></button>
                            </br>
                        </div>
                    </div>
                </div>
            </div>
3

2 Respostas 2

6

Neste caso seria possível com múltiplos background + gradiente linear:

.btn-fab {
  border: 1px solid #000;
  border-radius: 30px;
}
.btn-pizza-1 {
  background-color: #fff;
}
.btn-pizza-2 {
  background-color: #fff;
  background-image: linear-gradient(to bottom, transparent 49%, #000 49%, #000 51%, transparent 51%);
}
.btn-pizza-3 {
  background-color: #fff;
  background-image: 
    linear-gradient(to right, transparent 49%, #000 49%, #000 51%, transparent 51%),
    linear-gradient(to bottom,transparent 49%, #000 49%, #000 51%, transparent 51%);
}
.btn-pizza-4 {
  background-color: #fff;
  background-image: 
    linear-gradient(to right, transparent 49%, #000 49%, #000 51%, transparent 51%),
    linear-gradient(to bottom,transparent 49%, #000 49%, #000 51%, transparent 51%),
    linear-gradient(45deg,transparent 49%, #000 49%, #000 51%, transparent 51%),
    linear-gradient(135deg,transparent 49%, #000 49%, #000 51%, transparent 51%);
}
<div class="panel-body no_padding padding_bottom_top_list" style="display: inline-block;">
                <div class="list-group">
                    <div class="list-group-item list_group_item_padding">
                        <div class="row-action-primary padding_right_list" style="text-align:center">
                            <button class="btn btn-fab  green_status2 btn-pizza-1" style="width:60px; height:60px; font-size:30px; color:white; "></button>
                            </br>
                            <button class="btn btn-fab  green_status2 btn-pizza-2" style="width:60px; height:60px; font-size:30px; color:white; "></button>
                            </br>
                            <button class="btn btn-fab  green_status2 btn-pizza-3" style="width:60px; height:60px; font-size:30px; color:white; "></button>
                            </br>
                            <button class="btn btn-fab  green_status2 btn-pizza-4" style="width:60px; height:60px; font-size:30px; color:white; "></button>
                            </br>
                        </div>
                    </div>
                </div>
            </div>

Compatibilidade com navegadores: http://caniuse.com/#feat=multibackgrounds http://caniuse.com/#feat=css-gradients

1

Uma sugestão com transform para as diagonais, que ainda é bastante aceito pelo navegadores:

#base {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid;
  border-radius: 100%;
}
#vert {
  position: absolute;
  width: 0;
  height: 100px;
  border: 1px solid;
  left: 50%;
}
#horz {
  position: absolute;
  width: 100px;
  height: 0;
  border: 1px solid;
  top: 50%;
}
#diag1 {
  position: absolute;
  width: 0;
  height: 100px;
  border: 1px solid;
  transform: rotate(45deg);
  left: 50%;
}
#diag2 {
  position: absolute;
  width: 0;
  height: 100px;
  border: 1px solid;
  transform: rotate(-45deg);
  left: 50%;
}
<div id="base">
  <div id="vert"></div>
  <div id="horz"></div>
  <div id="diag1"></div>
  <div id="diag2"></div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .