CSS：大父框角上的彩色小框

Question

请参考下面从演示应用程序中截取的屏幕截图。 box over box image 我需要创建一个彩色的小方框，它出现在左上角，但好像在大父方框上方（包括 white/parent 框内的内容）。

请您有什么建议请告诉我该应用程序将是一个 Angular-8，带有广泛使用的 Prime 图标。谢谢

更新：组件结构如下，见附件： component structure

Answer 1

您可以使用 :after pseudo-class 来完成。请参阅演示代码段。

body {
  background: lightgrey;
}

.element {
  width: 150px;
  height: 150px;
  background: white;
  position: relative;
  margin: 20px;
  padding: 5px;
}

.element:after {
  content: " ";
  background: #00ee00;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  left: 0;
  top: -10px;
  position: absolute;
}

<html>
<body>
<div class="element">
  <h4>Title</h4>
  
  <p class="text">Text text text</p>
  <p class="text">Text text text</p>
</div>
</body>
</html>

CSS：大父框角上的彩色小框

CSS: small colorful box over corner of a big parent box

css

primeng

angular