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

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

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


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

如何自己手工获取自己的Access Token

如何自己手工获取自己的Access Token

在使用WP2PCS前,你需要了解,WP2PCS目前只支持百度网盘,(将来将支持360网盘和腾讯微云,这要看它们的API什么时候开放, 且容易开发)是基于百度PCS的API开发的,和坊间流传的抓取百度网盘文件直链不同,WP2PCS从百度网盘获取文件的源(二进制流),是百度许可并鼓 励开发者使用的接...

php 获取页面内容

function get_contents($url){     if(function_exists('file_get_contents')){       &nbs...

图文解说Navicat使用ssh方式连接远程MySql服务器

图文解说Navicat使用ssh方式连接远程MySql服务器

如何使用Navicat 8.0 for MySQL连接公司服务器的数据库,但我也是第一次接触这个软件,搞了半天也没连上,在网上找了很多解决的办法,其中就有使用ssh方式连接的,但写的不够详细,因此还是费了一番功夫,自己搞定的,不敢独享,特记录下来 与大家分享。首先,在Navicat的连接设置里选择S...

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

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

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

jQuery UI 使用入门

jQuery UI 使用入门

 最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望 对新手有帮助。文章结尾附源码下载。1 jQuery UI        有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码。直到...

PHP实现登陆后台限制到只允许一台机器在线

方法一:# <?php# ob_start();# session_start();# class CC{#   private $REFURL="http://www.php100.com";    //登陆成功后转换页面#   private $LoginFLAG=fa...

发表评论

访客

看不清,换一张

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