首页 > 其他分享 >css 设置画对角斜线

css 设置画对角斜线

时间:2023-10-31 13:35:05浏览次数:32  
标签:right EEF2F8 斜线 top position 对角 margin css absolute

/* 通过 css 画 div 的对角斜线 */
background: linear-gradient(to top right, #EEF2F8, #EEF2F8 48%, #CEDFF8, #EEF2F8 51%, #EEF2F8);

/* element-ui table 表头 */

.header-column {
  height: 49px;
  position: relative;

  &:before {
    position: absolute;
    content: ' ';
    height: 100%;
    width: 100%;
    color: #bbbbbc;
    background: linear-gradient(to top right, #EEF2F8, #EEF2F8 48%, #CEDFF8, #EEF2F8 51%, #EEF2F8);
    left: 0;
    top: 0;
  }

  .headerCon1 {
    position: absolute;
    bottom: @margin;
    left: @margin;
  }

  .headerCon2 {
    position: absolute;
    top: @margin;
    right: @margin;
  }
}

标签:right,EEF2F8,斜线,top,position,对角,margin,css,absolute
From: https://www.cnblogs.com/whm-blog/p/17800042.html

相关文章

  • css面试题
    1.css中的哪些单位 绝对单位:  px:像素单位 相对单位:  em:相对父元素字体大小  rem:相对根元素字体大小2.居中的方式1.水平居中1.设置盒子:margin:0auto2.display: flex2.垂直居中   1.vertical-align:middle 实现居中,1. display:i......
  • 视频直播app源码,CSS div水平垂直居中和div置于底部
    视频直播app源码,CSSdiv水平垂直居中和div置于底部一、水平居中 .hor_center{  margin:0auto;}​二、水平垂直居中 .content{  width:360px;  height:240px;} .ver_hor_center{  position:absolute;  top:50%;  left:50%;  margi......
  • css控制table首列固定内容滚动
    tabletbody{display:block;height:500px;overflow-y:scroll;}tablethead,tbodytr{display:table;width:100%;table-layout:fixed;box-s......
  • 利用CSS 实现环形百分比进度展示
    先看效果图: UI设计了这样的效果,已读人数占总人数的百分比,环形展示。这里可以用echarts图表,也可以用css实现,因为我是在小程序环境下,考虑到包大小体积,采用了css实现。核心就是一行代码:background-image:conic-gradient(#e9e9e930deg,transparent30deg);这个只是一个静......
  • SCSS的嵌套规则可以减少重复代码,那么如何在嵌套规则中使用父选择器?
    在SCSS中,使用&符号来引用父选择器,在嵌套规则中使用父选择器。这样可以避免重复编写选择器,并且在生成的CSS中保持正确的层级关系。以下是一个示例,展示了如何在嵌套规则中使用父选择器:.button{background-color:blue;&:hover{background-color:darkblue;}&.ac......
  • css 多列布局
    1.1多列布局这里感谢小甲鱼,毕竟编程是小甲鱼带入坑了鱼C-Web-CSS-速查1.1.1column-count定义:column-count属性指定某个元素应分为的列数。column-count:number|auto;值说明number列的最佳数目将其中的元素的内容无法流出auto列数将取决于其他属性。......
  • CSS 动画
    1.1过渡transitiontransition:background-size2scubic-bezier(0,.98,.33,1.1);steps()函数可以配合使用steps(5,end)1.2变形transform1.2.1旋转rotate()函数可以配合使用transition:2s;transform:rotate(-180deg);向左旋转,2s旋转1180deg(度)transit......
  • 【转】CSS重置文档/reset.css
    前言reset.css文档就是一个普通的层叠样式表文档,就是css文档,一个网站一般会用三种css文档来设定网站的样式。重置样式(reset.css)(重置默认的css样式);公共样式 (common.css)(一系列页面共用共享的样式,如:头部底部样式);独立样式(每个页面单独使用的样式,如index.css)。在这里具体讲......
  • css图片宽高不同,缩放图片,保持宽高,注意最外层的盒子要用display:inline-flex
    <divclass="product"><Popoverplacement="right"><template#content><divclass="w-[200px]h-[200px]"><img:src=&......
  • 用html 加css 绘制表格
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>/*头部样式定义*/.header{padding-bottom:10px;/*设置头部的下内边距*/......