css实现左上角标签

<div>


    <div class="circle"></div>
    <div class='wrap'>
        <div class='ribbon'>
            <span>测试1</span>
        </div>
    </div>

</div>

<style>
    .circle {
        width:100px;
        height:50px;
        background-color:#cb18f8;
        border-radius:0 0 50% 0;
    }
    .ribbon {
  background-color: #1890FF;
  overflow: hidden;
  white-space: nowrap; 
  position: absolute;
  left: -40px;
  top: 10px;
  transform: rotate(-45deg);  
  box-shadow: 0 0 10px #888; 
}

.wrap {
    min-width: 200px;
    min-height: 200px;
    text-align: center;
    position: relative; 
    overflow: hidden;
    border: 1px solid #F3F3F3; 
    background-color: #3EA1FF36; 
}
.ribbon span {
  border: 1px solid #1890FF;
  color: #fff;
  display: block;
  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 5px 50px;
  text-align: center;
  text-shadow: 0 0 5px #444;
}
</style>

标签：color,text,Helvetica,1px,background,标签,左上角,border,css
来源： https://www.cnblogs.com/zipon/p/15852348.html