css3图形绘制

以下几个例子主要是运用了css3中border、bordr-radius、transform、伪元素等属性来完成的，我们先了解下它们的基本原理。

      border：简单的来说border语法主要包含（border-width、border-style、border-color）三个属性。

    • „ border-top（上边框）：border-width border-style border-color
    • „ border-right（右边框）：border-width border-style border-color
    • „ border-bottom（下边框）：border-width border-style border-color
    • „ border-left（左边框）：border-width border-style border-color

     border-radius：border-radius 的语法比我们想像中灵活得多。你可能会惊讶地发现 border-radius 原来是一个简写属性。它所对应的各个展开式属性：

    • „ border-top-left-radius（左上圆角半径）
    • „ border-top-right-radius （右上圆角半径）
    • „ border-bottom-right-radius （右下圆角半径）
    • „ border-bottom-left-radius（左下圆角半径）

     border-image：共有三个属性，分别是图片（border-image-source）、剪裁位置（border-image-slice）、重复性（border-image-repeat）。

      图片：使用URL调用

      剪裁位置：共有1~4个参数，没有单位（默认是像素），也可以用百分比

    • 第一个参数a：距离上边相应长度进行裁剪
    • 第二个参数b：距离右边相应长度进行裁剪
    • 第三个参数c：距离下边相应长度进行裁剪
    • 第四个参数d：距离左边相应长度进行裁剪

      重复性：有三个参数 stretch（默认值），round，repeat

    • 默认值是stretch，拉伸的意思，可以看到上面的效果图中，“2”是垂直拉伸的，“>”是水平拉伸的，而中间的格子是水平垂直一起拉伸的。
    • round是平铺
    • repeat是重复

 

话不多说，来直接看下效果：

1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角）

    主要用到的是：宽度高度设置为0， border的各个边的设置（各个边的透明或不透明）；

.triangle-up {
/* 三角形 */
width: 0;
height: 0;
border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #f00; } .triangle-down { /* 倒三角 */ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #f00; } .triangle-left { /* 左三角 */ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 100px solid #f00; } .triangle-right { /* 右三角 */ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid #f00; } .triangle-topleft { /* 左上三角 */ width: 0; height: 0; border-right: 100px solid transparent; border-top: 100px solid #f00; } .triangle-topright { /* 右上三角 */ width: 0; height: 0; border-left: 100px solid transparent; border-top: 100px solid #f00; } .triangle-downleft { /* 左下三角 */ width: 0; height: 0; border-right: 100px solid transparent; border-bottom: 100px solid #f00; } .triangle-downright { /* 右下三角 */ width: 0; height: 0; border-left: 100px solid transparent; border-bottom: 100px solid #f00; }

　2、梯形（三角形的变体，设置左右两条边相等，并且给它设置一个宽度）

  

.Trapezium {
height: 0;
width: 100px;
border-bottom: 100px solid #dc2500;
border-left: 50px solid transparent;
border-right: 50px solid transparent; }

 

3、爱心（心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点）

        .love {
/* 爱心 */
position: relative;
}
.love:before {
content: "";
width: 70px;
height: 110px;
background: #f00;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%; transform: rotate(45deg); } .love:after { content: ""; width: 70px; height: 110px; background: #f00; position: absolute; border-top-left-radius: 50%; border-top-right-radius: 50%; transform: rotate(-45deg); left: -30px; }

　4、　食人豆（吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形）

   .pacman {
/* 食人豆 */
width: 0;
height: 0;
border: 60px solid #f00;
border-right: 60px solid transparent; border-radius: 100%; }

5、对话框（消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形）

 .alertDialog {
/* 对话框：一个圆角矩形和一个小三角形 */
width: 150px;
height: 100px;
background: #f00;
border-radius: 10px;
position: relative;
}
.alertDialog:before {
content: "";
width: 0; height: 0; position: absolute; left: -20px; top: 40px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 20px solid #f00; }

　　6、钻石（首先画一个直角梯形，再通过伪类元素在其下方画一个三角形）

 .diamond {
/* 钻石：梯形和三角形组成 */
width: 50px;
height: 0;
position: relative;
border-bottom: 25px solid #f00;
border-left: 25px solid transparent; border-right: 25px solid transparent; } .diamond:before { content: ""; width: 0; height: 0; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 70px solid #f00; left: -25px; top: 25px; }

　　7、五角星（星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边）

  .starFive {
/* 五角星： */
width: 0;
height: 0;
position: relative;
border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 60px solid #f00; transform: rotate(35deg); } .starFive:before { content: ""; position: absolute; width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 60px solid #f00; transform: rotate(-70deg); top: 3px; left: -80px; } .starFive:after { content: ""; position: absolute; width: 0; height: 0; border-bottom: 60px solid #f00; border-right: 20px solid transparent; border-left: 20px solid transparent; transform: rotate(-35deg); top: -40px; left: -49px; }

　　8、菜单（结合::before和::after两个伪元素）

   

.btn-hamburger i {
/* position: relative; */
display: -moz-inline-stack;
display: inline-block;
zoom: 1; width: 22px; height: 3px; color: #fff; font: bold .24rem/0.4 Helvetica; text-transform: uppercase; text-indent: -55px; background: #fff; transition: all 0.2s ease-out; } .btn-hamburger i::before, .btn-hamburger i::after { content: ''; width: 22px; height: 3px; background: #fff; position: absolute; left: 0; transition: 0.2s; } .btn-hamburger i::before { top: -7px; } .btn-hamburger i::after { bottom: -7px; }

更多专业前端知识，请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/365746.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vueh5调用摄像头拍照_潜望式拍照5G手机盘点：售价相差数千元 究竟怎么选？

vueh5调用摄像头拍照_潜望式拍照5G手机盘点：售价相差数千元 究竟怎么选？

【dogkeji-科技犬】最近很多网友询问科技犬，目前支持50X潜望式长焦手机都有哪些，可否进行相关手机的推荐，今天就应大家的需求来盘点一下，给各位网友一些参考。推荐一，三星 Galaxy S20 U三星Galaxy S20 5G系列不仅搭载了…
阅读更多...
09 事件对象

09 事件对象

上篇介绍完我们js的事件流的概念之后，相信大家对事件流也有所了解了。那么接下来我们看一下jquery的事件操作。 在说jquery的每个事件之前，我们先来看一下事件对象 事件对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状…
阅读更多...
使用Struts2，Hibernate和MySQL创建个人MusicManager Web应用程序的研讨会

使用Struts2，Hibernate和MySQL创建个人MusicManager Web应用程序的研讨会

概述： 在本研讨会教程中，我们将使用Struts 2，Hibernate和MySQL数据库开发一个个人音乐管理器应用程序。 该Web应用程序可用于将您的音乐收藏添加到数据库中。 我们将显示用于添加唱片的表格，并在下面显示所有音乐收藏。 通过单击“…
阅读更多...
链表快速排序python_Python一行代码实现快速排序的方法

链表快速排序python_Python一行代码实现快速排序的方法

今天将单独为大家介绍一下快速排序！ 一、算法介绍 排序算法（Sorting algorithm）是计算机科学最古老、最基本的课题之一。要想成为合格的程序员，就必须理解和掌握各种排序算法。其中"快速排序"（Quicksort&…
阅读更多...
自定义滚动条样式

自定义滚动条样式

啥都不说先看图: 注: 只适合chrom,不适用IE和fireFox 下面展示代码: 1 <html lang"en">2 <head>3 <meta charset"UTF-8">4 <title>CSS3自定义滚动条-轩枫阁</title>5 <style>6 header7 {8 font-family: …
阅读更多...
解决zsh下ls命令无高亮颜色问题

解决zsh下ls命令无高亮颜色问题

问题原因因为本人比较菜不清楚, 但总归瞎弄解决了, 做个记录 解决方法 进入用户目录下的.bashrc(~/.bashrc), 寻找ls相关配置找到后将相关配置复制到.zshrc(~/.zshrc)中如果找不到的话, 可以复制我找到的直接复制. if [ -x /usr/bin/dircolors ]; thentest -r ~/.dircolors &am…
阅读更多...
[折半搜索][has] Jzoj P4250 路径

[折半搜索][has] Jzoj P4250 路径

Description A国有n个城市&#xff0c;编号为1到n&#xff0c;任意两个城市之间有一条路。shlw闲得没事干想周游A国&#xff0c;及从城市1出发&#xff0c;经过且仅经过除城市1外的每个城市1次&#xff08;城市1两次&#xff09;&#xff0c;最后回到城市1。由于shlw很傻&#…
阅读更多...
使用Guava CharMatcher和Apache Commons Lang StringUtils确定字符串中字符或整数的存在

使用Guava CharMatcher和Apache Commons Lang StringUtils确定字符串中字符或整数的存在

最近Reddit上的帖子提出了一个问题&#xff1a;“ 是否存在一种预定义的方法来检查变量值是否包含特定字符或整数&#xff1f; ”基于问题的标题也被以另一种方式问到&#xff0c;“一种检查变量是否包含诸如列表之类的数字的方法或快速方法&#xff0c;例如或&#xff08;x&am…
阅读更多...
rust为什么显示不了国服_Rust编程语言初探

rust为什么显示不了国服_Rust编程语言初探

静态、强类型而又不带垃圾收集的编程语言领域内&#xff0c;很久没有新加入者参与竞争了&#xff0c;大概大部分开发者认为传统的C/C的思路已经不太适合新时代的编程需求&#xff0c;即便有Ken Tompson这样的大神参与设计的golang也采用了GC的思路来设计其新一代的语言&#xf…
阅读更多...
wps表格粗线和细线区别_详解论文中的表格技术

wps表格粗线和细线区别_详解论文中的表格技术

今天我们主要学习的技能如下&#xff1a;• 怎样用word做论文要求的三线表• 三线表中辅助线的断开• 表格或者图片自动编号1. 先普及一下&#xff0c;论文中的三线表吧。三线表以其形式简洁、功能分明、阅读方便而在科技论文中被推荐使用。三线表通常只有3条线&#xff0c;即顶…
阅读更多...
素材

素材

svg: www.sfont.cn/svg/ehed7f 转载于:https://juejin.im/post/5b9b70a8e51d450e4b1bdd33
阅读更多...
如何自定义CSS滚动条的样式？

如何自定义CSS滚动条的样式？

欢迎大家前往腾讯云 社区&#xff0c;获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器&#xff0c;并在demo中展示如何在Webkit内核浏览器和IE浏览器中&#xff0c;自定义一个横向以及一个纵向的滚动条。 0.需求 有的时候我们不想使用浏览器默…
阅读更多...
RabbitMQ基础知识

RabbitMQ基础知识

RabbitMQ基础知识 一、背景RabbitMQ是一个由erlang开发的AMQP&#xff08;Advanced Message Queue &#xff09;的开源实现。AMQP 的出现其实也是应了广大人民群众的需求&#xff0c;虽然在同步消息通讯的世界里有很多公开标准&#xff08;如 COBAR的 IIOP &#xff0c;或者是 …
阅读更多...
使用Spring RestTemplate和Super类型令牌消费Spring-hateoas Rest服务

使用Spring RestTemplate和Super类型令牌消费Spring-hateoas Rest服务

Spring-hateoas为应用程序创建遵循HATEOAS原理的基于REST的服务提供了一种极好的方法。 我的目的不是要展示如何创建服务本身&#xff0c;而是要展示如何将客户端写入服务。 我将要使用的示例服务是Josh Long&#xff08; starbuxman &#xff09;编写的“ the-spring-rest-s…
阅读更多...
ansible-playbook 实战案例 全网备份 实时备份

ansible-playbook 实战案例 全网备份 实时备份

目录 ansible-playbook 基础介绍1.YAML三板斧2. ansible playbook 安装apache 示例案例 全网备份 实时备份环境规划目录规划base.yamlrsync.yamlnfs.yamlsersync.yamlweb.yamlmail.yamlansible-playbook 基础介绍 playbook是由一个或多个模块组成的&#xff0c;使用多个不同的模…
阅读更多...
iview 级联选择组件_使用 element-ui 级联插件遇到的坑

iview 级联选择组件_使用 element-ui 级联插件遇到的坑

需求描述【省市区三级联动】组件&#xff1a;Cascader 级联选择器后端需要所选中的地区的名字&#xff0c;如&#xff1a;[北京市, 北京市, 东城区]获取后端省市区具体列表的接口返回数据&#xff1a;// 省 - 参数1 [{value: 1,label: 北京市},... ] // 市 - 参数2 [{value: 1,…
阅读更多...
python高级语法装饰器_Python高级编程——装饰器Decorator超详细讲解上

python高级语法装饰器_Python高级编程——装饰器Decorator超详细讲解上

Python高级编程——装饰器Decorator超详细讲解&#xff08;上篇&#xff09;送你小心心记得关注我哦&#xff01;&#xff01; 进入正文全文摘要 装饰器decorator&#xff0c;是python语言的重要特性&#xff0c;我们平时都会遇到&#xff0c;无论是面向对象的设计或者是使用相…
阅读更多...
深入理解CPU和异构计算芯片GPU/FPGA/ASIC （上篇）

深入理解CPU和异构计算芯片GPU/FPGA/ASIC （上篇）

王玉伟&#xff0c;腾讯TEG架构平台部平台开发中心基础研发组资深工程师&#xff0c;专注于为数据中心提供高效的异构加速云解决方案。目前&#xff0c;FPGA已在腾讯海量图片处理以及检测领域已规模上线。 随着互联网用户的快速增长&#xff0c;数据体量的急剧膨胀&#xff0c;…
阅读更多...
jenkins-基础配置

jenkins-基础配置

一&#xff0c;配置远程连接服务器 系统管理 --> 系统设置 SSH remote hosts 二&#xff0c;设置docke的URL&#xff08;设置jenkins构建镜像时候所连接的docker url &#xff0c;参考 docker开启远程访问https://www.cnblogs.com/galsnag/articles/10069709.html&#xf…
阅读更多...
JSF：直接从页面将参数传递给JSF操作方法，这是JavaEE 6+的一个不错的功能

JSF：直接从页面将参数传递给JSF操作方法，这是JavaEE 6+的一个不错的功能

Java企业版JavaEE 6中提供的JSF 2的一项不错的功能是&#xff0c;您可以将参数传递给任何操作组件&#xff08;例如commandButton或commandLink组件&#xff09;的操作方法。 基于此&#xff0c;您可以最大程度地减少托管bean中的方法数量。 另外&#xff0c;为了最小化在bea…
阅读更多...
最新文章

Copyright @ 2022~2023