添加角落框以突出显示（typed.js）

Question

我实现了typed.js，想复制此highlighted text with excel-like box at corner

我目前突出显示了键入的文本，并在html中为该框实现了SVG，但是我似乎无法在角落找到它。

case

Answer 1

您可以尝试以下方法：

.typed {
  display: inline-block;
  color: #111517;
  background: rgba(0, 187, 255, 0.41);
  box-shadow:0 5px 0 #fff,
            5px 0 0 #fff, 
            5px 5px 0 red;
  padding: 2px 5px;
}

<div class="typed">
  Some text
</div>

或使用伪元素创建它：

.typed {
  display: inline-block;
  color: #111517;
  background: rgba(0, 187, 255, 0.41);
  position:relative;
  padding: 2px 5px;
}
.typed:before {
  content:"";
  position:absolute;
  top:100%;
  left:100%;
  background:red;
  width:5px;
  height:5px;
}

<div class="typed">
  Some text
</div>