zoukankan      html  css  js  c++  java
  • 4.怎样使用css实现一个切角效果

    效果图

    用到的是css的 linear-gradient,使用线性渐变来设置背景色

    首先设置一个圆角,先上HTML,就只是一个单单的容器

    <div class="con">
        hey,boy
    </div>

    用点css美观一下

    .con{
         200px;
        height: 120px;margin: auto;
        background: #58a;
        text-align: center;
        color: white;
    }

    实现一个切角 45deg

    .con{
        background: linear-gradient(45deg,transparent 15px,#58a 0);
    }

    效果如下

    这里有一个知识点,个人理解 当将当前渐变色宽度设置为0 时,该颜色渐变宽度将会选择之前出现的颜色宽度的最大值,直到结束,所以将颜色#58a 宽度设置为0,其任然会填充剩余部分

    下面我们来写俩个角,很多人可能会直接想45deg再写一次,像下面这样

    .con{
        background: linear-gradient(45deg,transparent 15px,#58a 0),
             linear-gradient(-45deg,transparent 15px,#58a 0);
    }

    看上去也没有什么毛病,但是却会没有一个切角

    因为切角被相互覆盖掉了,设置 background-size, background-repeat 同时设置渐变起始位置

    .con{
        background: linear-gradient(45deg,transparent 15px,#58a 0) bottom left,linear-gradient(-45deg,transparent 15px,#58a 0) bottom right;
        background-size: 50% 50%;        
        background-repeat: no-repeat;    
    }

     效果如下,已经完成了一半

     

    其实上班部分也差不多的原理分别设置135deg和-135deg

    像这样

    .con{
        background: linear-gradient(45deg,transparent 15px,#58a 0) bottom left,
                        linear-gradient(-45deg,transparent 15px,#58a 0) bottom right,
                    linear-gradient(135deg,transparent 15px,#58a 0) top left,
                        linear-gradient(-135deg,transparent 15px,#58a 0) top right;
        background-size: 50% 50%;        
        background-repeat: no-repeat;    
    }    

    完成,

    注:容器宽度最好为偶数,为奇数时候中间会出现一条线

     添加一个圆切角

    .con{
                    border: none;
                    background: #58a;
                    background: radial-gradient(circle at bottom right,transparent 25px,#58a 0) bottom right,
                                radial-gradient(circle at bottom left,transparent 25px,#58a 0) bottom left,
                                radial-gradient(circle at top left,transparent 25px,#58a 0) top left,
                                radial-gradient(circle at top right,transparent 25px,#58a 0) top right;
                    background-size: 50% 50%;
                    background-repeat: no-repeat;
                    color: white;
                    padding-top: 1em;
                    text-align:center;
                    line-height: 1.5;
                    filter: drop-shadow(2px 5px 3px rgba(0,0,0,.5));
                }

  • 相关阅读:
    TreeView拖动
    反射机制
    SQLServer2005/2008 XML数据类型操作
    开发与研发:一字之差的感想
    设置在64位机器上的IIS(IIS6/IIS7)兼容32位程序(64位ODBC和32位ODBC的问题同样适用)
    setTimeout和setInterval的使用
    Oracle 安装/使用、配置/卸载
    链接sql数据库以及Oracle 数据库和启动缓存以及停止缓存
    jQuery学习笔记—— .html(),.text()和.val()的使用
    C# List<T>用法
  • 原文地址:https://www.cnblogs.com/famLiu/p/7201598.html
Copyright © 2011-2022 走看看