juktastockCSS Figure box Pointing Bubble css

Border Box


.box .top-rb
<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;
}

		

Border Oval Box


.box.oval .top-rb
<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;
}

		

jukta stock code HTML CSS JS

Jukta Design SV Jukta Engine licensing CC BY-NC 4.0 2016