首页 > 其他分享 >css 右上角三角形标签样式

css 右上角三角形标签样式

时间:2023-08-21 14:13:21浏览次数:34  
标签:right 右上角 标签 100% 60px height color position css

<style>
.box{
position: relative;
height: 100px;
width: 300px;
border: 1px solid gray;
box-sizing: border-box;
}
.sanjiao{
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
background-color: red;
clip-path: polygon(0 0, 100% 100%,100% 0);
}
.sanjiao-text{
position: absolute;
top: 0;
right: 0;
z-index: 4;
color: #fff;
transform: rotate(45deg);
transform-origin: 0 50%;

}
</style>

</head>
<body>
<div class="box">
<div class="sanjiao"></div>
<div class="sanjiao-text">封存</div>
</div>
</body>

 

 

.sanjiao{
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
background-color: red;
clip-path: polygon(0 0, 100% 100%,100% 0);
}
.sanjiao-text{
position: absolute;
top: 0;
right: 0;
z-index: 4;
color: #fff;
transform: rotate(45deg);
transform-origin: 50% 50%;
height: 60px;
width: 60px;
text-align: center;
line-height: 30px;
white-space: nowrap;

}

标签:right,右上角,标签,100%,60px,height,color,position,css
From: https://www.cnblogs.com/zhyp/p/17645835.html

相关文章

  • 4 CSS属性选择器
    4属性选择器属性选择器是通过元素的属性及属性值来选择元素的。下面介绍属性选择器的用法。第一种用法作用:选择含有指定属性的元素。语法:[属性名]{}示例如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>属性选择器</title><s......
  • 标签大全(纯文字版) 如需搜索使用Ctrl+F
    【公司信息】全部页面可用公司名称------{co('name')}公司地址------{co('address')}邮政编码------{co('postcode')} 联系人------{co('contact')} 联系手机------{co('phone')} 联系电话------{co('tel')} ......
  • CSS 实现一个带弧边的区域
    一、需求描述在移动端的开发中,经常遇到下图这样的弧边设计弧边其实有很多方案,但像上图这样的情况更适合用border实现,因为这样更方便封装为组件 二、初步实现可以将页面顶部的区域看做一个大圆与页面的交集,基于这个思路就能开发出一个基本的html结构<body><divcl......
  • CSS笔记-盒子模型
    CSS笔记-盒子模型1.盒子模型css开发中,常常会提到一个词叫做“盒子”,这里的盒子专业名词叫“盒子模型(BoxModel)”,这一术语是从来设计和布局时使用的。通俗的讲,所有的HTML元素都可以看做是一个盒子;那么,将页面中所有的元素都设置成一个矩形的盒子后,对页面的布局就可以理解成把不......
  • 「twcms插件」取随机内容标签
    1、把附件解压,放到twcms\block文件下面。2、调用方法{block:rand mid="2"}{loop:$data[list] $v}<p><a href="{$v[url]}">{$v[subject]}</a></p>{/loop}{/block}不传递参数mid,默认为2(读取文章)默认随机5条,可以定义参数limit="10"......
  • TWCMS的SEO标题标签调用优化代码
    做SEO的朋友都有一个习惯,那就是用SEO标题,很多人不知道,其实TWCMS是支持的,只是很多人不知道,今天就给大家讲一下TWCMS标题SEO标签调用优化代码,网站title标签默认主题为<title>{$tw[titles]}</title>如果我们单独设置了某些分类、单页以及文章的SEO标题,要区分这些单独设置了的SEO......
  • TWCMS网站通用标签
    网站通用标签本标签文档以最新的TWCMS_v2.03版本为测试基础模版中调用写法:{inc:header.htm}(需将对应模版命名为inc-header.htm)网站首页连接:{$tw[weburl]}网站名称:{$tw[webname]}网站标题:{$tw[titles]}SEO标题:{$tw[seo_title]}seo关键词:{$tw[seo_keywords]}seo描述:{$tw......
  • CSS – Houdini
    介绍简单说这个 Houdini是一系列CSS底层API,它可以让我们扩展CSS,做出一些Polyfill。举一个例子,让大家有个画面。我们可以通过CSS+JS+Canvas语法来自创CSS语法,游览器解析CSS时它会跑我们的JS,而JS用类似Canvas画画的方式去达成最终的渲染效果。这是其中一......
  • 博客园css与目录导航
    默认配置:皮肤:BlueSky页面定制css代码:root{--accent-color:#696969;/*nice*/--primary-colour:#306797;/*<>*/--background-color:white;--background-gray:#f5f5f5;--border-color:#dbdbdb;--code-bg-color:#f8f8f8;--font-color:#1f......
  • CSS实现文字描边效果
    一、介绍最近在一个项目的宣传页中,设计师使用了文字描边效果,之前我确实没有实现过文字的描边效果,然后我在查阅资料后,知道了实现方法。文字描边分为两种:内外双描边和单外描边,也就是指在给文字加上描边效果后,描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。二、......