css三角加文字的实现方法

是大刚啊

已于 2024-03-07 16:31:04 修改

阅读量534

点赞数 3

文章标签： css css3 前端

于 2024-03-07 16:29:49 首次发布

本文链接：https://blog.csdn.net/qq_45797421/article/details/136537607

版权

1.不带圆角的效果和代码

如何想要调整文字在这个三角里面的位置(高度方面的),可以调整文字所在标签样式 line-height的值
status标签和 txts标签的width和height属性值最好是相同的,如果你没写相同,效果会不一致,需要自己调整

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .fa {
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid red;
      }
      .status {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        overflow: hidden;
      }
      .icon {
        position: absolute;
        right: 0;
        top: 0;
        width: 110px;
        height: 110px;
        border: 8px;
        background: aqua;
        -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
        clip-path: polygon(100% 0, 0 0, 100% 100%);
      }

      .txts {
        line-height: 60px;
        text-align: center;
        transform: rotate(45deg);
        transform-origin: center center;
        color: #ffffff;
        font-size: 18px;
      }
      .ce {
        width: 110px;
        height: 110px;
      }
    </style>
  </head>
  <body>
    <div class="fa">
      <div class="status ce">
        <div class="icon"></div>
        <div class="txts ce">三角文字</div>
      </div>
    </div>
  </body>
</html>

2.带圆角的代码,效果不是很好,如果有更好的实现方法请在评论区留言

带圆角的话这个status 和 txts的宽度/宽度是要比icon的宽度/高度小的,效果可以自己慢慢调

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .fa {
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid red;
      }
      .status {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        overflow: hidden;
        border-radius: 6px;
      }
      .icon {
        position: absolute;
        right: 0;
        top: 0;
        width: 110px;
        height: 110px;
        border: 8px;
        background: aqua;
        -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
        clip-path: polygon(100% 0, 0 0, 100% 100%);
      }

      .txts {
        line-height: 60px;
        text-align: center;
        transform: rotate(45deg);
        transform-origin: center center;
        color: #ffffff;
        font-size: 18px;
      }
      /* 带圆角的话这个status 和 txts的宽度/宽度 是要比icon的宽度/高度小的,效果可以自己慢慢调 */
      .ce {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="fa">
      <div class="status ce">
        <div class="icon"></div>
        <div class="txts ce">三角文字</div>
      </div>
    </div>
  </body>
</html>