Css hover with box shadow is not working as i required - html

Question

<style>
.ui-state-active {
color: #fff;
background:red;
#box-shadow: inset -7px 7px 9px -7px #236c4d;
width:50px;
height:50px;
}
.ui-state-active:hover{
box-shadow: inset 15px 7px 9px -7px #fff;
box-shadow: inset -7px 7px 9px -7px #fff;
}
</style>
<div class="ui-state-active">18
</div>
I need something like this, when i hovered on a div it show a transformed triangle on top right like shown in image, I just explained my requirement as image for clear clarification

Answer 1

You can do it with pseudo elements :before or :after
.ui-state-active {
color: #fff;
background:red;
width:50px;
height:50px;
position: relative;
}
.ui-state-active:hover:after{
content: '';
position: absolute;
top: 3px;
right: 3px;
border: solid 10px white;
border-color: white white transparent transparent;
}
<div class="ui-state-active">18
</div>

Answer 2

I wouldn't use a box-shadow, I'd use a pseudo-element.
There's a couple of way to do that.
1. A position, rotated pseduo-element:
span {
display: block;
width: 3em;
height: 3em;
line-height: 3em;
text-align: center;
background: #f00;
color: white;
font-weight: bold;
margin: 3em auto;
overflow: hidden;
position: relative;
}
span::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: orange;
top: -100%;
left: 100%;
transform: rotate(45deg) translate(0%, 0%);
transition: transform .35s ease;
}
span:hover::after {
transform: rotate(45deg) translate(0%, 50%)
<span>16</span>
2. Alternatively, a psuedo-element made entirely of borders
div {
display: block;
width: 3em;
height: 3em;
line-height: 3em;
text-align: center;
background: #f00;
color: white;
font-weight: bold;
margin: 3em auto;
overflow: hidden;
position: relative;
}
div::after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 0;
right: 0;
border-style: solid;
border-color: orange orange transparent transparent;
border-width: 0px;
transition: border-width .35s ease;
}
div:hover::after {
border-width: 12px;
}
<div>16</div>

Answer 3

Try this out, :)
HTML
<div class="date">
<div class="sideflip"></div>
18
</div>
CSS
.date
{
width:80px;
height:80px;
border:1px solid #000000;
text-align:center;
font-size:65px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
background:red;
color:#ffffff;
position:relative;
overflow:hidden;
}
.sideflip
{
width:50px;
height:50px;
font-size:1px;
position:absolute;
-ms-transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
margin-left:160px;
margin-top:-130px;
background:#ffffff;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.date:hover .sideflip
{
margin-left:60px;
margin-top:-30px;
}
.date:hover
{
cursor:pointer;
}