CSS制作图形

作者：北人南漂记 | 来源：互联网 | 2023-09-04 10:34

气泡三角形利用border的transparent特性实现

气泡三角形

《CSS制作图形》


      
        
        利用 border 的 transparent 特性实现

        
          .bubbly

梯形

《CSS制作图形》


      梯形

      
        
        利用伪类加旋转透视实现

        
          .trapezoid

爱心

《CSS制作图形》


#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

太极图

《CSS制作图形》


#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}

折角

《CSS制作图形》


        

        
        利用切角、伪类、渐变、旋转实现

        
          .corner

混合模式背景图

《CSS制作图形》


        
        利用渐变实现

        
          .colorful-stripe

多云

《CSS制作图形》


        
        利用线性渐变、阴影、缩放实现

        
          .cloudy

阴影实现多云天气图案

《CSS制作图形》


        多云（cloudy2）（单标签实现）

        利用线性渐变、阴影、缩放实现

        
          .cloudy2

阴影实现雨天天气图案

《CSS制作图形》


        雨（rainy）

        利用线性渐变、阴影、缩放实现

        
          .rainy

彩虹天气图案

《CSS制作图形》


        彩虹（rainbow）

        利用border、box-shadow 实现

        
          .rainbow

chrome 浏览器图标

《CSS制作图形》


        Chrome（单标签实现）

        利用渐变实现

IE 浏览器图标

《CSS制作图形》


        IE（单标签实现）

        利用渐变、多重阴影实现

safari 浏览器图标

《CSS制作图形》


        safari（单标签实现）

        利用渐变、border、旋转实现

推荐阅读

text
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
text
Android开发笔记：使用Picasso加载网络图片等比例缩放

在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]

蜡笔小新 2023-12-14 17:34:00
text
selenium 定位方式3css_selector

关于页面元素定位，可以根据id、class、name属性以及link_text。其中id属性是最理想的定位方式，class与name属性， ... [详细]

蜡笔小新 2024-09-28 14:23:38
text
CSS浮动和定位属性介绍

这篇文章主要介绍“CSS浮动和定位属性介绍”，在日常操作中，相信很多人在CSS浮动和定位属性介绍问题上存在疑惑，小编查阅了各式资料，整理出简单 ... [详细]

蜡笔小新 2024-09-26 10:30:04
text
看完这篇还搞不懂HTTPS，就来找我！

本文将为大家详细梳理一下H ... [详细]

蜡笔小新 2024-09-26 03:20:11
text
turn page

NGUIusingSystem;usingUnityEng ... [详细]

蜡笔小新 2024-09-25 15:16:38
text
【机器学习手册】日期和时区操作的重要性及应用

本文介绍了机器学习手册中关于日期和时区操作的重要性以及其在实际应用中的作用。文章以一个故事为背景，描述了学童们面对老先生的教导时的反应，以及上官如在这个过程中的表现。同时，文章也提到了顾慎为对上官如的恨意以及他们之间的矛盾源于早年的结局。最后，文章强调了日期和时区操作在机器学习中的重要性，并指出了其在实际应用中的作用和意义。 ... [详细]

蜡笔小新 2023-12-12 17:40:14
text
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
text
怎么能做到超链接点击后变色

在分页时,我想让点过的页码变色.应该怎么做?比如:12345我点2跳到第2页然后2变成红色其他为蓝色 ... [详细]

蜡笔小新 2023-10-16 11:39:24
text
Vue案例（搜索页面）

<!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]

蜡笔小新 2023-10-16 06:20:19
text
使用HTML创建弹出框以便用户输入信息

在做项目的过程中，我们时常需要进行一些弹框操作，比如在后台管理时需要进行的一些增删改操作，这个时候我们需要使用到弹框，或者在 ... [详细]

蜡笔小新 2023-10-14 08:49:35
text
Tooltips效果，鼠标经过显示提示

Tooltips效果，鼠标经过显示提示 ... [详细]

蜡笔小新 2023-10-13 13:52:29
text
python元类、反射及双线方法

元类print(type(abc))print(type(True))print(type(100))print(type([1,2,3]))print(type({na ... [详细]

蜡笔小新 2024-09-30 10:42:20
text
Mysql MySqlBulkLoader在.NET平台下的批量插入

批量导入publicboolTranBatchImpo ... [详细]

蜡笔小新 2024-09-30 10:20:25
text
css 回到顶部按钮

本文由编程笔记#小编为大家整理，主要介绍了css回到顶部按钮相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-10-17 13:38:49

北人南漂记

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章