当前位置： 首页 > 编程日记 > 正文

css画图笔记

编程日记 2024-08-12 21:00:00

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

在网页中，经常会用到各种Icon，如果老是麻烦设计狮画出来不免有些不好意思，所以有时候我们也可以用CSS写出各种简单的形状，一来可以减轻他们的负担，二来也可以使用CSS替代图片，提高加载速度。

在网页中，结合CSS能画出来的最基本的形状就是矩形，所以，我们可以在矩形的基础上做出各种变换，得到很多不同的形状。

这次的分享主要用到圆角、边框、定位等知识点（鉴于IE9以上才支持圆角，暂时不考虑兼容问题）

先做一些通用的基础设置：

[css] view plain copy print?

  1. div {  
  2.     width: 100px;  
  3.     height: 100px;  
  4.     line-height: 100px;  
  5.     text-align: center;  
  6.     margin: 100px;  
  7.     background-color: red;  
  8. }  

毫无疑问，结合HTML就可以画出最基本的矩形：

[html] view plain copy print?

  1. <div>矩形</div>  

效果：

下面针对矩形做一些变换：

圆形：

[html] view plain copy print?

  1. <div class="circle">圆形</div>  

border-radius圆角的四个值按顺序取值分别为：左上、右上、右下、左下。

原理：四个角都是圆角：四个角的取值为50%或为宽和高一样的值（此处即100px）。

[css] view plain copy print?

  1. .circle {  
  2.     border-radius: 50%;  
  3. }  


半圆：

[html] view plain copy print?

  1. <div class="semi-circle">半圆</div>  

原理：左上、右上角是圆角，右下、左下角是直角： 左上角、右上角的值为宽和高一样的值，右下角、左下角的值不变（等于0）；另外，因为还要设置高度值为原来高度的一半才是标准的半圆。

[css] view plain copy print?

  1. .semi-circle {  
  2.     border-radius: 100px 100px 0 0;  
  3.     height: 50px;  
  4. }  


扇形：

[html] view plain copy print?

  1. <div class="sector">扇形</div>  

原理：左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值不变（等于0）。

[css] view plain copy print?

  1. .sector {  
  2.     border-radius: 100px 0 0;  
  3. }  


弧形：

[html] view plain copy print?

  1. <div class="arc">弧形</div>  

原理：两个对角变，另外两个对角不变：比如，左上角、右下角取值为宽和高一样的值，右上角、左下角的值不变（等于0） .添加transform属性可旋转成平躺的弧形，类似人的嘴巴形状，(*^__^*) 嘻嘻……

[css] view plain copy print?

  1. .arc{  
  2.         border-radius: 100px 0;  
  3.         -webkit-transform: rotate(45deg);  
  4.         -ms-transform: rotate(45deg);  
  5.         -o-transform: rotate(45deg);  
  6.         transform: rotate(45deg);  
  7.     }  

小三角：

[html] view plain copy print?

  1. <div class="triangle"></div>  
  2. <div class="arrow"></div>  

原理：设置边框，并把原来div的宽和高的值设置为0，即把原来的矩形压缩成只有边框，但因为设置的边框值比较大（为了保证三角形看起来不会太小或者太细），然后设置每一个边框的颜色不同，就可以看出三角形其实就可以是由边框变换而来的。若只想显示某一块三角形，可以把其他的边框颜色设置为透明，即transparent。

[css] view plain copy print?

  1. .triangle{  
  2.         border: 50px solid green;  
  3.         width: 0;  
  4.         height: 0;  
  5.         border-top-color: yellow;  
  6.         border-right-color: blue;  
  7.         border-bottom-color: pink;  
  8.         border-left-color: orange;  
  9.     }  
  10.     .arrow{  
  11.         background: none;   /*为了清除前面div设置的背景颜色*/  
  12.         border: 50px solid red;  
  13.         width: 0;  
  14.         height: 0;  
  15.         border-color: red transparent transparent transparent;  
  16.     }  


疑问框：

[html] view plain copy print?

  1. <div class="rectangle">疑问框</div>  

原理：由圆角矩形和一个小三角组成：可结合伪元素、定位实现。

[css] view plain copy print?

  1. /*圆角矩形*/  
  2.     .rectangle{  
  3.         width: 200px;  
  4.         border-radius: 15px;  
  5.         position: relative;  
  6.     }  
  7.     /*小三角*/  
  8.     .rectangle::before{  
  9.         content: "";  
  10.         width: 0;  
  11.         height: 0;  
  12.         border: 15px solid red;  
  13.         border-color: red transparent transparent transparent;  
  14.         position:absolute;  
  15.         bottom: -30px;  
  16.         left: 40px;  
  17.     }  

https://www.dkcj.cn/info/13986.html

相关文章：

Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些

前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义&#xff0c;排序并不会影响CSS样式的功能和性能&#xff0c;只是让代码看起来更加整洁。CSS代码的逻辑性并不强&#xff0c;一般的开发者写CSS样式也很随意&#xff0c;所以如果不借助工具&#xff0c;不太容易按照既…

编程日记2024/08/12 20:50:00

超越Android：Kotlin在后端的工作方式

by Adam Arold亚当阿罗德(Adam Arold) 超越Android&#xff1a;Kotlin在后端的工作方式 (Going Beyond Android: how Kotlin works on the Backend) This article is part of a series.本文是系列文章的一部分。 While most developers use Kotlin on Android, it is also a …

编程日记2024/08/12 20:40:00

词汇的理解 —— 汉译英（术语）

词汇的理解 —— 英译汉 1. 名词 机制&#xff1a;mechanism&#xff0c;系统&#xff1a;system&#xff1b;2. 动词 融资&#xff1a;financing&#xff1b;制动&#xff1a;braking&#xff0c;就是“刹车”&#xff1b;3. 音乐与乐器 horn&#xff1a;喇叭&#xff0c;号角…

编程日记2024/08/12 20:30:00

Swift从零开始学习_08(代理协议传值)

Swift中的代理协议的写法. 这是第一个页面有一个button和一个label, button点击跳到下一个页面. 第二个页面有一个输入框和一个按钮, 点击按钮把输入框里的内容设置为第一个页面label的内容.效果如下 接下来是代码部分.跟OC的写法还是一样的.这里不再写第一个页面的那些UI的…

编程日记2024/08/12 20:20:00

[微信小程序]商城之购买商品数量实现

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 这里有三种变更数量的方式&#xff0c; 加号&#xff0c;减号&#xff0c;input输入 &#xff0c; 这里做了限制&#xff0c;数量不能小于等于0并且不能超过现有库存&#xff0c;下面是…

编程日记2024/08/12 20:10:00

测试nginx网站代码_在40行以下代码中使用NGINX进行A / B测试

测试nginx网站代码by Nitish Phanse由Nitish Phanse 在40行以下代码中使用NGINX进行A / B测试 (A/B testing with NGINX in under 40 lines of code) A/B Testing, has enabled designers and product managers to get a deep insight into user behavioral patterns.A / B测试…

编程日记2024/08/12 20:00:00

HttpServletResponse,HttpServletRequest详解

HttpServletResponse,HttpServletRequest详解 1、相关的接口 HttpServletRequest HttpServletRequest接口最常用的方法就是获得请求中的参数&#xff0c;这些参数一般是客户端表单中的数据。同时&#xff0c;HttpServletRequest接口可以获取由客户端传送的名称&#xff0c;也可…

编程日记2024/08/12 19:50:00

[微信小程序]this.setData ， that.setData ， this.data.val三者之间的区别和作用

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 1.this.setData({ }) <view bindtouchmove"tap_drag" bindtouchend"tap_end" bindtouchstart"tap_start" class"page-top" style"{…

编程日记2024/08/12 19:40:00

jQuery(一)引入

一、jQuery简介 jQuery是一个兼容多浏览器的javascript库&#xff0c;核心理念是write less,do more(写得更少,做得更多) 二、安装 2.1、下载 下载地址&#xff1a;http://jquery.com/download/ 2.2、引入 在页面头部加入 <head> <meta http-equiv"Content-Type&…

编程日记2024/08/12 19:30:00

javascript 堆栈_JavaScript调用堆栈-它是什么以及为什么它是必需的

javascript 堆栈The JavaScript engine (which is found in a hosting environment like the browser), is a single-threaded interpreter comprising of a heap and a single call stack. The browser provides web APIs like the DOM, AJAX, and Timers.JavaScript引擎(可在…

编程日记2024/08/12 19:20:00

idea崩溃导致的svn插件丢失问题, maven dependencies视图丢失问题

Idea丢失Svn解决办法今天打开Idea&#xff0c;习惯用ctrlt来更新svn&#xff0c;杯具出现了&#xff0c;快捷键失效了&#xff0c;我觉得可能是其他的什么软件占用了这个快捷键&#xff0c;于是重启了一下&#xff0c;发现还是不行&#xff0c;svn信息怎么没了&#xff0c;chan…

编程日记2024/08/12 19:10:00

python3代码

import urllib.request url"http://mm.taobao.com/json/request_top_list.htm?type0&page1" upurllib.request.urlopen(url)#打开目标页面&#xff0c;存入变量up contup.read()#从up中读入该HTML文件 key1<a href"http#设置关键字1key2"target&qu…

编程日记2024/08/12 19:00:00

【微信小程序】侧滑栏，手动侧滑出个人中心（完整代码附效果图）

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文&#xff1a; 博文分三部分&#xff0c;1.效果图及功能效果说明 2.实现思路 3.源代码 欢迎加入微信小程序开发交流群&#xff08;173683895&#xff09; 一.老惯例先上效果图&#xff0c;本篇博…

编程日记2024/08/12 18:50:00

1:1 人脸比对 开源_Hacktoberfest：我的开源门户

1:1 人脸比对 开源by Maribel Duran通过Maribel Duran Hacktoberfest&#xff1a;我的开源门户 (Hacktoberfest: My Gateway to Open Source) “Individually, we are one drop. Together, we are an ocean.”“就个人而言&#xff0c;我们只是一滴滴。 在一起&#xff0c;我们…

编程日记2024/08/12 18:40:00

地图收敛心得170405

寻路算法大总结! 交换机生成树采用的是完全不同的D-V(distance vector)距离矢量算法,并不是很可靠. 并不是任意两点之间的最短路径,因为任意两点之间取最短路径可能有环路:总权更大 交换机STP不一定是最小生成树!!!举例论证 因为它只是所有交换机到根桥最短 贪心算法的味道 kru…

编程日记2024/08/12 18:30:00

微信小程序游戏开发文档以及开发工具地址

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文&#xff1a; 微信官方于 2017 - 12 - 28 日 开发微信小程序 开发小游戏 &#xff0c; 微信小程序小游戏开发官方文档的地址 https://mp.weixin.qq.com/debug/wxagame/dev/index.html?t20171228…

编程日记2024/08/12 18:20:00

c#编译执行过程

创建一个简单的控制台程序&#xff0c;源码如下&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text;namespace csharpBuildProcess {class Program{static void Main(string[] args){for (int i 0; i < 100; i){if(i%20)…

编程日记2024/08/12 18:10:00

渐进式web应用程序_渐进式Web应用程序简介

渐进式web应用程序Interested in learning JavaScript? Get my ebook at jshandbook.com有兴趣学习JavaScript吗&#xff1f; 在jshandbook.com上获取我的电子书 Progressive Web Apps (PWA) are the latest trend in mobile application development using web technologies.…

编程日记2024/08/12 18:00:00

第二百二十节，jQuery EasyUI，Slider(滑动条)组件

jQuery EasyUI&#xff0c;Slider(滑动条)组件 学习要点&#xff1a; 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法&#xff0c;这个组件依赖于 Draggable(拖动)组件。 一&#xff0e;加载方式 class 加载方式 <…

编程日记2024/08/12 17:50:00

适用于SharePoint 2013 的 CAML Desinger

适用于SharePoint 2013 的 CAML Desinger 分类&#xff1a; SharePoint2013-01-15 21:52 1877人阅读 评论(0) 收藏 举报CAMLDesingerSharePoint 2013代码生成适用于如果说Sql是信息管理系统的一等公民&#xff0c;那么SharePoint 系统中的一等公民就非CAML莫属了。 但是这个一等…

编程日记2024/08/12 17:40:00

微信小程序 跑马灯效果完整代码附效果图

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 一&#xff1a;功能介绍及讲解 实现的跑马灯&#xff08;跑马灯里面显示文章的title&#xff09;的效果&#xff0c;并在右侧有个查看文章的按钮&#xff0c;按钮绑定当前的跑马灯信…

编程日记2024/08/12 17:30:00

热闹的聚会与尴尬的聚会_如何增加（和保存）您最喜欢的技术聚会

热闹的聚会与尴尬的聚会by Jen Weber詹韦伯(Jen Weber) 如何增加(和保存)您最喜欢的技术聚会 (How to Grow (and Save) Your Favorite Tech Meetup) Hey meetup facilitators, friends, and future leaders! Do you want more people to show up to your tech event? Or at l…

编程日记2024/08/12 17:20:00

蓝桥杯-搭积木-java

/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称&#xff1a; 蓝桥杯赛题 * 作 者&#xff1a; 彭俊豪 * 完成日期&#xf…

编程日记2024/08/12 17:10:00

微信小程序多张图片和表单一起上传，验证表单及进度条的实现完整代码

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 效果图&#xff1a; 完整代码: <!--pages/register/register.wxml--> <view classtop> <view>注 册 须 知 : </view> </view> <view> <view …

编程日记2024/08/12 17:00:00

Android, BaseAdapter 处理大数据量时的优化

Android优化 最常见的就是ListView, Gallery, GridView, ViewPager 的大数据优化 图片优化 访问网络的优化优化的原则&#xff1a; 数据延迟加载 分批加载 本地缓存数据优化 1).复用contentview 2).创建static class ViewHolder 3).分…

编程日记2024/08/12 16:50:00

meetup_我在2017年举办Meetup中学到的知识以及为何对2018年充满期待。

meetupby Daniel Deutsch由Daniel Deutsch 我在2017年举办Meetup中学到的知识以及为何对2018年充满期待。 (What I’ve learned hosting Meetups in 2017 — and why I’m looking forward to 2018.) As 2017 comes to an end, it’s time to reflect on the non-profit work …

编程日记2024/08/12 16:40:00

BASE64 编码和解码

依赖jar: import org.apache.commons.codec.binary.Base64; BASE64和其他相似的编码算法通常用于转换二进制数据为文本数据&#xff0c;其目的是为了简化存储或传输。更具体地说&#xff0c;BASE64算法主要用于转换二进 制数据为ASCII字符串格式。Java语言提供了一个非常好的BA…

编程日记2024/08/12 16:30:00

Android开发常用属性

1、android string.xml 文字中间加入空格 android string.xml前后加空格的技巧 <string name"password">密 码</string> &#160 这个就代表着空格 2、文字单行显示 android layout布局文件中TextView、EditView单行显示和输入 <TextView androi…

编程日记2024/08/12 16:20:00

JS计算起点坐标到终点坐标的驾车距离和驾车时间

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 先上计算距离的简单demo&#xff1a; <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8"&…

编程日记2024/08/12 16:10:00

css flexbox模型_5分钟内学习CSS Flexbox-初学者教程

css flexbox模型快速介绍流行的布局模块 (A quick introduction to the popular layout module) In this post, you’ll learn the basics of CSS Flexbox, which has become a must-have skill for web developers and designers in the last couple of years.在本文中&#x…

编程日记2024/08/12 16:00:00