CSS在矩形右上角画三角形符号

拼搏现实的明天。 2022-10-15 12:53 529阅读 0赞

在这里插入图片描述

  1. <template>
  2.     <div class="margin-2">
  3.     </div>
  4. </template>
  5. <style>
  6. .margin-2 { 
  7.     margin-bottom: 30px;
  8.     border: 1px solid rgba(45, 106, 230, 100);
  9.     padding: 10px;
  10.     position: relative;
  11. }
  12. .margin-2::before { 
  13.         content: "";
  14.         width:0;
  15.         height: 0;
  16.         border:60px solid transparent;
  17.         border-right:60px solid #2D6AE6;
  18.         transform: rotate(135deg);
  19.         position: absolute;
  20.         right: -61px;
  21.         top: -61px;
  22.         cursor: pointer;
  23.     }
  24. .margin-2::after { 
  25.     content: "设置";
  26.     width: 40px;
  27.     height: 30px;
  28.     color: #FFF;
  29.     transform: rotate(45deg);
  30.     position: absolute;
  31.     right: 13px;
  32.     top: 16px;
  33.     font-weight: bold;
  34.     letter-spacing:2px;
  35.     cursor: pointer;
  36. }
  37. </style>

发表评论

表情：
评论列表 （有 0 条评论，529人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css 如何画三角形

    之前一直不懂用 css 的 border 属性怎么画出的三角形，今天来总结一下。 关键就在于如果指定一条边的border，那这个border就是一条直线。 ![Image

    末蓝、末蓝、/ 0 赞/ 366 阅读