当前位置:首页 > 技术文档 > 正文内容

CSS实现三角形角标以及三角形内写文字

admin5年前 (2020-09-11)技术文档2656


1.伪元素

1586339228_1_.png

//html<div class="box">
      <div class="inner-box"></div>
</div>

//css.box {
    width: 500px;
    height: 300px;   
    background-color: blue;    
    margin: 20px auto;    
    overflow: hidden;    
    .inner-box {      
        width: 0;      
        height: 0;      
        border-width: 30px 30px 0 0;      
        border-style: solid;      
        border-color: #6c6 transparent transparent transparent;
    }    
    .inner-box::after {      
        position: relative;      
        content: "已投";      
        display: block;      
        width: 30px;      
        height: 30px;      
        font-size: 2px;      
        left: 0px;      
        top: -30px;      
        transform: rotate(45deg);
    }
  }


2. 正方形旋转

NMp9FxVNl4cIw6DH.png

<div class="box1">
    <div class="inner-box1">
      <p>已投</p>
    </div>
</div>

.box1 {    
    position: relative;    
    width: 200px;    
    height: 200px;    
    background-color: orange;    
    overflow: hidden;    
    .inner-box1 {      
        width: 50%;      
        height: 50%;      
        background-color: red;      
        transform: rotate(-45deg);      
        position: absolute;      
        left: -30%;      
        top: -30%;      
        p {
            position: absolute;        
            left: 50%;        
            bottom: -15px;        
            color: #fff;        
            transform: translateX(-50%);
        }
    }
}


分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:https://yuyunhe.cn/index.php/post/304.html

分享给朋友:

“CSS实现三角形角标以及三角形内写文字” 的相关文章

利用ctrl+v实现粘贴截图完成上传功能

<?php header("Access-Control-Allow-Origin:*"); $url  = 'http://'.$_SERVER['HTTP_HOST']; $file =&nb...

dz第三方模块添加方法

dz第三方模块添加方法

使用dz做网站的朋友有时候会用到第三方模块专题,这就会遇到一个模块通信的问题,可是弄了半天就是“数据无法识别,请返回”, 也够雷人的,ok,这你就给大家分享下本人的一点经验,以供大家参考!dz第三方模块添加方法...

用php gettext库来开发多语言系统

用php gettext库来开发多语言系统

通常人们写程序时都是将文字写死在程序里的, 比如:echo "Hello World!";  ,假如要改成它国语言,写国际化程序,就要逐个打开进行修改,程序较短时还行,若程序有上万甚至更多,改起来就不是那么容易了。近来随着i18n的逐渐标 准化,我也来讲一讲在PHP中如...

Discuz!二次开发必备知识——DZ程序文件目录含义

分类: DZ程序文件目录含义基于7.0的标准程序,部分与插件无关的文件不作说明文件颜色说明:红色:程序核心文件,修改这类文件时千万要注意安全!橙色:做插件几乎不会用到的文件,大概了解功能就可以了,其实我也不推荐修改这些文件绿色:函数类文件,许多功能强大的自定义函数可以调用这类文件来...

php利用百度地图API进行IP定位和GPS定位

最 近在做一个手机端的webapp地图应用,而核心内容当然是定位了,但是定位的话有几种方式,IP定位,GPS定位,基站定位(这个貌似webapp用不 了), 那么剩下核心的gps定位和ip定位了,我们知道,html5有定位API,但是该API拿到的GPS数据是硬件坐标,无法直接显示在地图上。...

ThinkPHP实现多数据库连接的解决方法

这篇文章主要介绍了ThinkPHP实现多数据库连接的解决方法,需要的朋友可以参考下ThinkPHP实现连接多个数据的时候,如果数据库在同一个服务器里的话只需要这样定义模型:?123class MembersModel extends Model{protected $trueTableName =...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。