精华内容
下载资源
问答
  • css实现缺角div

    2020-05-09 11:22:49
    css实现缺角div <div class="block"></div> 方法一:伪元素实现 用伪元素画一个和背景色相同的三角形,然后绝对定位到需要遮挡的地方 eg: .block{ width: 120px; height: 60px; background: yellow...

    css实现缺角div

    <div class="block"></div>
    

    方法一:伪元素实现

    用伪元素画一个和背景色相同的三角形,然后绝对定位到需要遮挡的地方
    eg:

      .block{
        width: 120px;
        height: 60px;
        background: yellow;
        position: relative;
      }
      
      .block::before{
      	position: absolute;
        right: 0;
        bottom: 0;
        content: '';
        width: 0;
        height: 0;
        border: 5px solid #6b00d8;
        border-top-color: transparent;
        border-left-color: transparent;
      }
      
      .block::after{
      	position: absolute;
        left: 0;
        top: 0;
        content: '';
        width: 0;
        height: 0;
        border: 5px solid #6b00d8;
        border-bottom-color: transparent;
        border-right-color: transparent;
      }
    

    效果图如下:
    效果图
    tips:这个方法最多只能弄两个缺角

    方法二:linear-gradient渐变实现

    语法:

    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
    

    eg:
    一个角:

    .block{
        width: 120px;
        height: 120px;
        background: linear-gradient(-45deg, transparent 10px, yellow 0);
    }
    

    效果图如下:
    效果图

    四个角:

    .block{
        width: 120px;
        height: 120px;
        background: linear-gradient(135deg, transparent 10px, yellow 0) top left,
                    linear-gradient(-135deg, transparent 10px, yellow 0) top right,
                    linear-gradient(-45deg, transparent 10px, yellow 0) bottom right,
                    linear-gradient(45deg, transparent 10px, yellow 0) bottom left;
        background-size: 50% 50%; // 实际上是用4个小图形拼出来的,表示每个小图形宽50%,高50%
        background-repeat: no-repeat;
    }
    

    效果图如下:
    效果图

    展开全文
  • CSS利用1像素空缺实现为类圆角效果body {padding:20px; font-family:arial; text-align:center;}p, li {font-size: 12px; line-height:18px;}h3 {margin-bottom:6px;}.examplesGoHere {text-align:left; margin:0 ...
    CSS利用1像素空缺实现为类圆角效果

    body {padding:20px; font-family:arial; text-align:center;}

    p, li {font-size: 12px; line-height:18px;}

    h3 {margin-bottom:6px;}

    .examplesGoHere {text-align:left; margin:0 auto; }

    .letsGiveItAFixedWidthOf200Pixels { width:200px; }

    ul {list-style:none;margin-left:0;padding-left:0;margin-top:0;}

    ul li {margin-bottom:8px; margin-left:0;padding-left:0; }

    .notchedListItems a {

    display:block;

    border: solid #666;

    border-width: 0 1px;

    text-decoration: none;

    outline:none;

    color: #000;

    background: #e4e4e4;

    }

    .notchedListItems a b {

    display: block;

    position:relative;

    top: -1px;

    left: 0;

    border:solid #666;

    border-width:1px 0 0;

    font-weight:normal;

    }

    .notchedListItems a b b {

    border-width:0 0 1px;

    top: 2px;

    padding:1px 6px;

    }

    .notchedListItems a:hover,

    .notchedListItems a:hover b {background:#666;color:white;}

    .feature {

    border:solid #647aae;

    border-width:0 1px;

    background:#b0c0e6;

    }

    .feature div {

    position:relative;

    top: -1px;

    left: 0;

    border:solid #647aae;

    border-width:1px 0 0;

    }

    .feature div div {

    top: 2px;

    border-width:0 0 1px;

    padding: .3em .3em .1em;

    }

    列表示例:

    DIV区域:

    这个程序虽然不复杂,但拿来就可以用,简单实用。而对于DELPHI爱好者来说,它具有着很方便的报表模板设计,可以打印机套打,程序使用了Access数据库和ReportBuilder 7.03控件,运行于Delphi 7.0……

    展开全文
  • CSS写一个缺角div

    千次阅读 2019-08-19 13:36:00
    今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

    今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div


    5640239-5fc082f6547ea7e7.png
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .box {
                    width: 900px;
                    height: 50px;
                    background: linear-gradient(-145deg, transparent 11px, #0b2b5f 0) right, linear-gradient(145deg, transparent 11px, #0b2b5f 0) left;
                    background-size: 50% 100%;
                    background-repeat: no-repeat;
                }
            </style>
        </head>
        <body>
            <div class="box"></div>
        </body>
    </html>
    

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚,欢迎关注【编程微刊】公众号,回复【领取资源】,500G编程学习资源干货免费送。

    展开全文
  • 今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...

    今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .box {
                    width: 900px;
                    height: 50px;
                    background: linear-gradient(-145deg, transparent 11px, #0b2b5f 0) right, linear-gradient(145deg, transparent 11px, #0b2b5f 0) left;
                    background-size: 50% 100%;
                    background-repeat: no-repeat;
                }
            </style>
        </head>
        <body>
            <div class="box"></div>
        </body>
    </html>

     

    展开全文
  • 缺角DIV

    2019-08-12 20:02:22
    利用before/after伪元素的绝对定位并让它的背景颜色和外部颜色保持一致, 用这种方法的好处在于你可以同时使用:before和:after在DIV上实现两个缺角 代码如下: .block{ background:gray; height:60px; width...
  • 想问一下这个红箭头指的地方用css 怎么写 这个小细节如何实现比较好 呢 能贴css代码最好
  • 前几天偶然看到缺角矩形这个功能,脑袋中第一想法是,搞个绝对定位的伪元素,哪里需要挡哪里,或者找UI小哥聊聊天,忽然灵光一闪,想起之前翻过的《CSS揭秘》一书,记得有这个篇章,遂有了此文。 话不多说,放个效果...
  • 项目中经常用到不规则的背景或边框,最直接的解决方案是通过切图或用...使用css3渐变实现缺角矩形,linear-gradient相关属性介绍移步官网。 <div class="box"></div> <style> .box{ width: 100px.
  • 主要运用径向渐变实现div缺角效果 单个缺角 background-image: linear-gradient(45deg,#f0343c 90%,transparent 10%); 上下左右缺角分别为45°,135°,225°,415° (每次顺时针旋转90°) 多个缺角 ...
  • 径向渐变做缺角效果

    2018-12-21 22:51:57
    标签:CSS样式,渐变 缺角效果 效果 话不多说直接上设计稿 不仔细的前端开发者稍不注意就会忽略一些细节,尤其是两个缺角效果就不会完美的实现。 圆角实现 这个页面的主体是两个圆角的盒子组成,有些图方便或者不...
  • 实现缺角效果

    2019-03-28 00:04:00
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>缺角效果 </title>...style type="text/css"> .meaning{ /*background:tan;*/ ...
  • div内发光效果 CSS

    千次阅读 2018-07-07 10:04:00
     .all {  width:97%;  height:95%;  margin-left:1.5%;  margin-top:1.6%;  border-radius:5px;... box-shadow:rgb(11, 234, ...<div class="all"></div> 转载于:https://www.cnblogs.com/f-l-y/p/9276462.html
  • 因为还要添加按钮,所以就用了一个div做了一个button,个人喜欢圆角的边框那就加上了。 然后出现了以下的问题。 第一个是没有添加border-radius的时候。第二个是添加了border-radius。代码如下。 /* CSS */ .search...
  • css实现三角形,div实现三角形缺口

    千次阅读 2020-04-24 17:59:07
    1、css实现三角形 有时候面试题或者日常需求中会有用纯css来实现三角形的例子,目前本人的知识量只能提供两种方案 ...div{ border:40px solid; border-left-color: lightslategrey; border-right-color: l...
  • div class="box"> <div class="button"> 按钮 </div> </div> <div class="box1"> 哈哈 <span></span> <span></span> <span></span> <...

空空如也

空空如也

1 2 3 4 5 6
收藏数 104
精华内容 41
关键字:

缺角divcss