css实现上下左右对勾选中状态角标

news2025/11/4 17:58:42

🍥左上角

🍥右上角

🍥左下角

🍥右下角:

🍥左上角:

  .blueBackground {
    position: relative;
    border: 1px solid #91c7f3;
    background: #F0F8FF !important;


    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      border-top: 17px solid #2D52D8FF;
      border-right: 17px solid transparent;
    }

    &:before {
      content: "";
      position: absolute;
      width: 8px;
      height: 4px;
      background: transparent;
      top: 4px;
      left: 0px;
      border: 1.5px solid white;
      border-top: none;
      border-right: none;
      -webkit-transform: rotate(-50deg);
      -ms-transform: rotate(-50deg);
      transform: rotate(-50deg);
      z-index: 9;
    }
}

🍥 右上角:

  .blueBackground {
    position: relative;
    border: 1px solid #91c7f3;
    background: #F0F8FF !important;
    &:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      border-top: 17px solid #2D52D8FF;
      border-left: 17px solid transparent;
    }
    &:before {
      content: "";
      position: absolute;
      width: 8px;
      height: 4px;
      background: transparent;
      top: 4px;
      right: 0px;
      border: 1.5px solid white;
      border-top: none;
      border-right: none;
      -webkit-transform: rotate(-50deg);
      -ms-transform: rotate(-50deg);
      transform: rotate(-50deg);
      z-index: 9;
    }
  }

🍥左下角:

.blueBackground {
    position: relative;
    border: 1px solid #91c7f3;
    background: #F0F8FF !important;

    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      border-bottom: 17px solid #2D52D8FF;
      border-right: 17px solid transparent;
    }

    &:before {
      content: "";
      position: absolute;
      width: 8px;
      height: 4px;
      background: transparent;
      bottom: 4px;
      left: 0px;
      border: 1.5px solid white;
      border-top: none;
      border-right: none;
      -webkit-transform: rotate(-50deg);
      -ms-transform: rotate(-50deg);
      transform: rotate(-50deg);
      z-index: 9;
    }
  }

🍥右下角:

.blueBackground {
    position: relative;
    border: 1px solid #91c7f3;
    background: #F0F8FF !important;

    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      border-bottom: 17px solid #2D52D8FF;
      border-left: 17px solid transparent;
    }

    &:before {
      content: "";
      position: absolute;
      width: 8px;
      height: 4px;
      background: transparent;
      bottom: 4px;
      right: 0px;
      border: 1.5px solid white;
      border-top: none;
      border-right: none;
      -webkit-transform: rotate(-50deg);
      -ms-transform: rotate(-50deg);
      transform: rotate(-50deg);
      z-index: 9;
    }
  }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1647375.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！