jukta
stock
CSS
Figure box Pointing Bubble css
<box class="box"> <box class="pointing-bubble p-b-l"> <box class="pointing-inner top-rb"></box> <box class="pointing-outer top-rb"></box> </box> </box>
.box { position: relative; box-sizing: border-box; height: 60px; width: 60px; margin: 20px; border-style: solid; border-width: 1px; border-color: gray; } .pointing-bubble { position: absolute; } .p-b-l { top: 10%; left: -12px; } .pointing-inner { position: absolute; z-index: 1; border: 7px solid white; } .pointing-inner.top-rb { top: 1px; left: 2.5px; border-bottom-color: transparent; border-left-color: transparent; } .pointing-outer { position: absolute; border: 6px solid gray; } .pointing-outer.top-rb { top: 0; left: 0; border-bottom-color: transparent; border-left-color: transparent; }
<box class="box oval"> <box class="pointing-bubble p-b-l"> <box class="pointing-inner top-rb"></box> <box class="pointing-outer top-rb"></box> </box> </box>
.box { position: relative; box-sizing: border-box; height: 60px; width: 60px; margin: 20px; border-style: solid; border-width: 1px; border-color: gray; } .box.oval { border-radius: 100%; } .pointing-bubble { position: absolute; } .oval .p-b-l { top: 10%; left: -5px; -ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); -ms-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; } .pointing-inner { position: absolute; z-index: 1; border: 7px solid white; } .pointing-inner.top-rb { top: 1px; left: 2.5px; border-bottom-color: transparent; border-left-color: transparent; } .pointing-outer { position: absolute; border: 6px solid gray; } .pointing-outer.top-rb { top: 0; left: 0; border-bottom-color: transparent; border-left-color: transparent; }
other stock resourse: CSS Reference Free stock amazing photo 30 stocks image
jukta stock code HTML CSS JS
Jukta Design SV Jukta Engine licensing CC BY-NC 4.0 2016