Radios

Pedra, papel ou tesoura

por @ravox·css

1
#f3ead9
1<div class="g" role="radiogroup" aria-label="Pedra, papel ou tesoura">2  <span class="leg"><b>Jo-ken-pô!</b><small>você × rival (que nunca aprende)</small></span>3  <div class="arena">4    <span class="lado eu"><span class="mao"><svg class="m1" width="96" height="70" viewBox="0 0 96 70" aria-hidden="true"><path class="manga" d="M-2 17 H20 V55 H-2Z" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M0 24 H18 M0 48 H18" stroke="#000" stroke-opacity=".16" stroke-width="2"/><rect x="17" y="14" width="11" height="44" rx="3" fill="#fbf7ef" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>5  <path d="M28 24 Q28 14 40 14 H70 Q78 14 78 20.25 Q78 26.5 72 26.5 Q80 26.5 80 32.25 Q80 38 73 38 Q80 38 80 43.75 Q80 49.5 72 49.5 Q78 49.5 78 54.75 Q78 60 70 60 H40 Q28 60 28 50 Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>6  <path d="M31 51 Q33 57 41 57 H70 Q75 57 76 55 Q58 55 44 53 Q36 52 31 51Z" fill="#dfa57d"/>7  <path d="M72 26.5 H63 M73 38 H63 M72 49.5 H62" stroke="#3a2418" stroke-width="1.8" stroke-linecap="round"/>8  <path d="M38 36 Q39 27 50 27 H64 Q71 27 71 32 Q71 37 64 37 H44 Q38.5 37 38 36Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>9  <path d="M63 28.8 Q68.6 28.8 68.6 32 Q68.6 35.2 63 35.2Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/>10  <path d="M35 19 Q39 16.6 50 16.6" stroke="#ffe2cc" stroke-width="3" fill="none" stroke-linecap="round"/>11</svg><svg class="m2" width="96" height="70" viewBox="0 0 96 70" aria-hidden="true"><path class="manga" d="M-2 17 H20 V55 H-2Z" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M0 24 H18 M0 48 H18" stroke="#000" stroke-opacity=".16" stroke-width="2"/><rect x="17" y="14" width="11" height="44" rx="3" fill="#fbf7ef" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>12  <path d="M50 16 H80 Q86 16 86 21 Q86 26 80 26 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>13  <path d="M50 26 H85 Q91 26 91 31.5 Q91 37 85 37 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>14  <path d="M50 37 H82 Q88 37 88 42 Q88 47 82 47 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>15  <path d="M50 47 H75 Q80 47 80 51.5 Q80 56 75 56 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>16  <path d="M52 54.5 H75 Q78 54.5 78.8 53" stroke="#dfa57d" stroke-width="2" fill="none" stroke-linecap="round"/>17  <path d="M80.5 18.4 Q84 21 80.5 23.6Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/><path d="M85.5 28.6 Q89 31.5 85.5 34.4Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/><path d="M82.5 39.4 Q86 42 82.5 44.6Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/><path d="M75.5 49.2 Q78.4 51.5 75.5 53.8Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/>18  <path d="M36 23 Q36 12 44 6 Q50 2 53 5 Q55 8 51 12 Q46 17 46 24Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>19  <path d="M28 22 Q28 16 36 16 H56 Q62 16 62 22 V50 Q62 57 55 57 H36 Q28 57 28 50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>20  <path d="M30 50 Q32 55 37 55 H55 Q60 55 60 50 Q46 53 30 50Z" fill="#dfa57d"/>21  <path d="M37 41 Q47 46 56 40" stroke="#d3946a" stroke-width="1.4" fill="none" stroke-linecap="round"/>22  <path d="M33 21 Q36 18.6 44 18.6" stroke="#ffe2cc" stroke-width="3" fill="none" stroke-linecap="round"/>23</svg><svg class="m3" width="96" height="70" viewBox="0 0 96 70" aria-hidden="true"><path class="manga" d="M-2 17 H20 V55 H-2Z" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M0 24 H18 M0 48 H18" stroke="#000" stroke-opacity=".16" stroke-width="2"/><rect x="17" y="14" width="11" height="44" rx="3" fill="#fbf7ef" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>24  <g transform="rotate(-18 50 22)"><path d="M50 17 H82 Q88 17 88 22 Q88 27 82 27 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M82.5 19.4 Q86 22 82.5 24.6Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/></g>25  <g transform="rotate(10 50 34)"><path d="M50 29 H84 Q90 29 90 34 Q90 39 84 39 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M84.5 31.4 Q88 34 84.5 36.6Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/></g>26  <path d="M28 24 Q28 15 40 15 H58 Q65 15 65 22 V40 Q72 40 72 45.5 Q72 51 66 51 Q71 51 71 55.5 Q71 60 64 60 H40 Q28 60 28 50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>27  <path d="M31 51 Q33 57 41 57 H64 Q68 57 69 55 Q54 55 44 53 Q36 52 31 51Z" fill="#dfa57d"/>28  <path d="M66 51 H58" stroke="#3a2418" stroke-width="1.8" stroke-linecap="round"/>29  <path d="M38 46 Q39 39 48 39 H60 Q66 39 66 43.5 Q66 48 60 48 H43 Q38.5 48 38 46Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>30  <path d="M59 40.6 Q64 40.6 64 43.5 Q64 46.4 59 46.4Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/>31  <path d="M35 20 Q39 17.6 50 17.6" stroke="#ffe2cc" stroke-width="3" fill="none" stroke-linecap="round"/>32</svg><svg class="punho" width="96" height="70" viewBox="0 0 96 70" aria-hidden="true"><path class="manga" d="M-2 17 H20 V55 H-2Z" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M0 24 H18 M0 48 H18" stroke="#000" stroke-opacity=".16" stroke-width="2"/><rect x="17" y="14" width="11" height="44" rx="3" fill="#fbf7ef" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>33  <path d="M28 24 Q28 14 40 14 H70 Q78 14 78 20.25 Q78 26.5 72 26.5 Q80 26.5 80 32.25 Q80 38 73 38 Q80 38 80 43.75 Q80 49.5 72 49.5 Q78 49.5 78 54.75 Q78 60 70 60 H40 Q28 60 28 50 Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>34  <path d="M31 51 Q33 57 41 57 H70 Q75 57 76 55 Q58 55 44 53 Q36 52 31 51Z" fill="#dfa57d"/>35  <path d="M72 26.5 H63 M73 38 H63 M72 49.5 H62" stroke="#3a2418" stroke-width="1.8" stroke-linecap="round"/>36  <path d="M38 36 Q39 27 50 27 H64 Q71 27 71 32 Q71 37 64 37 H44 Q38.5 37 38 36Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>37  <path d="M63 28.8 Q68.6 28.8 68.6 32 Q68.6 35.2 63 35.2Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/>38  <path d="M35 19 Q39 16.6 50 16.6" stroke="#ffe2cc" stroke-width="3" fill="none" stroke-linecap="round"/>39</svg></span></span>40    <i class="vs">×</i>41    <span class="lado ele"><span class="mao"><svg class="m1" width="96" height="70" viewBox="0 0 96 70" aria-hidden="true"><path class="manga" d="M-2 17 H20 V55 H-2Z" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M0 24 H18 M0 48 H18" stroke="#000" stroke-opacity=".16" stroke-width="2"/><rect x="17" y="14" width="11" height="44" rx="3" fill="#fbf7ef" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>42  <path d="M28 24 Q28 14 40 14 H70 Q78 14 78 20.25 Q78 26.5 72 26.5 Q80 26.5 80 32.25 Q80 38 73 38 Q80 38 80 43.75 Q80 49.5 72 49.5 Q78 49.5 78 54.75 Q78 60 70 60 H40 Q28 60 28 50 Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>43  <path d="M31 51 Q33 57 41 57 H70 Q75 57 76 55 Q58 55 44 53 Q36 52 31 51Z" fill="#dfa57d"/>44  <path d="M72 26.5 H63 M73 38 H63 M72 49.5 H62" stroke="#3a2418" stroke-width="1.8" stroke-linecap="round"/>45  <path d="M38 36 Q39 27 50 27 H64 Q71 27 71 32 Q71 37 64 37 H44 Q38.5 37 38 36Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>46  <path d="M63 28.8 Q68.6 28.8 68.6 32 Q68.6 35.2 63 35.2Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/>47  <path d="M35 19 Q39 16.6 50 16.6" stroke="#ffe2cc" stroke-width="3" fill="none" stroke-linecap="round"/>48</svg><svg class="m2" width="96" height="70" viewBox="0 0 96 70" aria-hidden="true"><path class="manga" d="M-2 17 H20 V55 H-2Z" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M0 24 H18 M0 48 H18" stroke="#000" stroke-opacity=".16" stroke-width="2"/><rect x="17" y="14" width="11" height="44" rx="3" fill="#fbf7ef" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>49  <path d="M50 16 H80 Q86 16 86 21 Q86 26 80 26 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>50  <path d="M50 26 H85 Q91 26 91 31.5 Q91 37 85 37 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>51  <path d="M50 37 H82 Q88 37 88 42 Q88 47 82 47 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>52  <path d="M50 47 H75 Q80 47 80 51.5 Q80 56 75 56 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>53  <path d="M52 54.5 H75 Q78 54.5 78.8 53" stroke="#dfa57d" stroke-width="2" fill="none" stroke-linecap="round"/>54  <path d="M80.5 18.4 Q84 21 80.5 23.6Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/><path d="M85.5 28.6 Q89 31.5 85.5 34.4Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/><path d="M82.5 39.4 Q86 42 82.5 44.6Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/><path d="M75.5 49.2 Q78.4 51.5 75.5 53.8Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/>55  <path d="M36 23 Q36 12 44 6 Q50 2 53 5 Q55 8 51 12 Q46 17 46 24Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>56  <path d="M28 22 Q28 16 36 16 H56 Q62 16 62 22 V50 Q62 57 55 57 H36 Q28 57 28 50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>57  <path d="M30 50 Q32 55 37 55 H55 Q60 55 60 50 Q46 53 30 50Z" fill="#dfa57d"/>58  <path d="M37 41 Q47 46 56 40" stroke="#d3946a" stroke-width="1.4" fill="none" stroke-linecap="round"/>59  <path d="M33 21 Q36 18.6 44 18.6" stroke="#ffe2cc" stroke-width="3" fill="none" stroke-linecap="round"/>60</svg><svg class="m3" width="96" height="70" viewBox="0 0 96 70" aria-hidden="true"><path class="manga" d="M-2 17 H20 V55 H-2Z" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M0 24 H18 M0 48 H18" stroke="#000" stroke-opacity=".16" stroke-width="2"/><rect x="17" y="14" width="11" height="44" rx="3" fill="#fbf7ef" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>61  <g transform="rotate(-18 50 22)"><path d="M50 17 H82 Q88 17 88 22 Q88 27 82 27 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M82.5 19.4 Q86 22 82.5 24.6Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/></g>62  <g transform="rotate(10 50 34)"><path d="M50 29 H84 Q90 29 90 34 Q90 39 84 39 H50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M84.5 31.4 Q88 34 84.5 36.6Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/></g>63  <path d="M28 24 Q28 15 40 15 H58 Q65 15 65 22 V40 Q72 40 72 45.5 Q72 51 66 51 Q71 51 71 55.5 Q71 60 64 60 H40 Q28 60 28 50Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>64  <path d="M31 51 Q33 57 41 57 H64 Q68 57 69 55 Q54 55 44 53 Q36 52 31 51Z" fill="#dfa57d"/>65  <path d="M66 51 H58" stroke="#3a2418" stroke-width="1.8" stroke-linecap="round"/>66  <path d="M38 46 Q39 39 48 39 H60 Q66 39 66 43.5 Q66 48 60 48 H43 Q38.5 48 38 46Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>67  <path d="M59 40.6 Q64 40.6 64 43.5 Q64 46.4 59 46.4Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/>68  <path d="M35 20 Q39 17.6 50 17.6" stroke="#ffe2cc" stroke-width="3" fill="none" stroke-linecap="round"/>69</svg><svg class="punho" width="96" height="70" viewBox="0 0 96 70" aria-hidden="true"><path class="manga" d="M-2 17 H20 V55 H-2Z" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/><path d="M0 24 H18 M0 48 H18" stroke="#000" stroke-opacity=".16" stroke-width="2"/><rect x="17" y="14" width="11" height="44" rx="3" fill="#fbf7ef" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>70  <path d="M28 24 Q28 14 40 14 H70 Q78 14 78 20.25 Q78 26.5 72 26.5 Q80 26.5 80 32.25 Q80 38 73 38 Q80 38 80 43.75 Q80 49.5 72 49.5 Q78 49.5 78 54.75 Q78 60 70 60 H40 Q28 60 28 50 Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>71  <path d="M31 51 Q33 57 41 57 H70 Q75 57 76 55 Q58 55 44 53 Q36 52 31 51Z" fill="#dfa57d"/>72  <path d="M72 26.5 H63 M73 38 H63 M72 49.5 H62" stroke="#3a2418" stroke-width="1.8" stroke-linecap="round"/>73  <path d="M38 36 Q39 27 50 27 H64 Q71 27 71 32 Q71 37 64 37 H44 Q38.5 37 38 36Z" fill="#f2c29a" stroke="#3a2418" stroke-width="2" stroke-linejoin="round"/>74  <path d="M63 28.8 Q68.6 28.8 68.6 32 Q68.6 35.2 63 35.2Z" fill="#f9dfcb" stroke="#3a2418" stroke-width="1.1"/>75  <path d="M35 19 Q39 16.6 50 16.6" stroke="#ffe2cc" stroke-width="3" fill="none" stroke-linecap="round"/>76</svg></span></span>77  </div>78  <b class="placa">Você venceu</b>79  <div class="ops">80    <label><input type="radio" name="jogo" id="j1" checked><span>Pedra</span></label>81    <label><input type="radio" name="jogo" id="j2"><span>Papel</span></label>82    <label><input type="radio" name="jogo" id="j3"><span>Tesoura</span></label>83  </div>84</div>
#mão#jogo#jo-ken-pô#escolha#claro#divertido

Mais radios

Ver todos