Css悬停与框阴影不起作用，因为我需要

Question

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我需要这样的东西，当我在div上徘徊时，它会在右上方显示一个变换后的三角形，如图所示，我只是将我的要求解释为图像以便清楚说明

Answer 1

您可以使用伪元素:before或:after

来执行此操作

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="ui-state-active">18
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不会使用盒子阴影，我会使用伪元素。

有几种方法可以做到。

1。一个位置，旋转了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。或者，一个完全由边框构成的伪元素

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

试试这个，:)）

<强> HTML

Id

<强> CSS

<div class="date">
   <div class="sideflip"></div>
    18
</div>