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

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

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


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实现三角形角标以及三角形内写文字” 的相关文章

appcan 云打包的方法

appcan 云打包的方法...

php检查用户名是否符合规定

<?php   /**  * 检查用户名是否符合规定 (两个字符以上,只能有中文,字母,数字,下划线的)  *  * @param STRING $username 要检查的用户名...

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

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

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

ThinkPHP分页的实现

分页类需要和查询相结合,我们可以使用ThinkPHP自带的limit方法或者page方法,目的就是为了获取当前分页的数据(也有先获取完整数据然后前端分页显示的方法,不在本文描述内容中,也不建议)。使用limit方法或者page方法是和数据库类型无关的。我们首先在数据库里面创建一个think_data...

phpcms v9更换模板的具体操作方法

phpcms v9更换模板的具体操作方法

这篇文章主要介绍了phpcms v9更换模板的具体操作方法,需要的朋友可以参考下分享一下Phpcms V9更换模板的具体操作方法先分享下大概的步骤:1、上传模版文件到服务器;2、在站点管理 里边【模板风格配置】选择新模板;3、设置不同模型对应模板;4、修改现有的栏目,匹配新模板;5、更新栏目缓存、系...

wamp下虚拟主机的配置

1  编辑httpd.conf,查找Include conf/extra/httpd-vhosts.conf,把前面注释符号“#”删掉。 2  编辑httpd-vhosts.conf,我把WAMPServer安装在D:/wamp,所以我这里的路径是D:\wamp\Apache2\...

发表评论

访客

看不清,换一张

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