学习CSS之用CSS绘制一些基本图形
一、三角形
如下图,通过设置 border 的大小和颜色可以形成四个三角形:
上图对应的代码为:
/* 三角形 */.triangle {width: 0;height: 0;border-top: 100px solid green;border-right: 100px solid red;border-bottom: 100px solid blue;border-left: 100px solid yellow;}
而要想实现绘制三角形,只需要将其他三个方向的 border 设置成“transparent”,如下图:
若要绘制直角三角形,则将其中两个方向的 border 设置成“transparent”,例如把 border-top 和 border-right 设置成透明的,得到的直角三角形如下图:
二、梯形
梯形的绘制和三角形类似,如下图:
而若要绘制某个方向的梯形,只需要将其他三个方向设置成“transparent”,如下图:
上图对应的代码为:
/* 梯形 */.trapezoidal {width: 50px;height: 50px;border-top: 50px solid transparent;border-right: 100px solid transparent;border-bottom: 50px solid blue;border-left: 100px solid transparent;}
三、平行四边形
平行四边形可以通过使用 skewX 或者 skewY 将矩形扭曲形变得到,如下图:
上图对应的代码为:
/* 平行四边形 */.parallelogram {width: 200px;height: 80px;background: green;transform: skewX(-45deg);}
四、菱形
菱形可以通过使用 rotate 将正方形进行旋转得到,如下图:
上图对应的代码为:
/* 菱形 */.diamond {width: 100px;height: 100px;background: blue;transform: rotate(45deg);}
除此之外,还可以将两个三角形拼起来形成一个菱形,如下图:
上图对应的代码为:
/* 菱形 */.diamond {width: 0;height: 0;border-top: 100px solid transparent;border-right: 100px solid blue;border-bottom: 100px solid transparent;border-left: 100px solid transparent;}.diamond::after {content: "";position: absolute;left: 208px;top: 7px;width: 0;height: 0;border-top: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid transparent;border-left: 100px solid green;}
五、扇形
90度的扇形好绘制的,如下图:
上图对应的代码为:
/* 扇形 */.sector {width: 100px;height: 100px;border-radius: 100px 0 0;background: green;}
六、椭圆
绘制椭圆时需要设置两个 border-radius,分别是对应矩形长和宽的一半,如下图:
上图对应的代码为:
/* 椭圆 */.ellipse {width: 200px;height: 100px;border-radius: 100px / 50px;background: blue;}
七、圆环
圆环可以看作一个由一个大圆形和一个小圆形构成的,通过改变小圆的颜色就能形成圆环的效果,如下图:
上图对应的代码为:
/* 圆环 */.ring {width: 100px;height: 100px;border-radius: 50px;background: yellow;}.ring::after {content: "";position: absolute;left: 23px;top: 23px;width: 70px;height: 70px;border-radius: 35px;background: darkgray;}
八、心形
绘制出来的心形如下图:
上图对应的代码为:
/* 心形 */.heart {width: 0;height: 0;}.heart::before,.heart::after {position: absolute;left: 50px;content: "";top: 10px;width: 50px;height: 80px;background: red;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;}.heart::after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}
学习CSS之用CSS绘制一些基本图形的更多相关文章
- 学习使用html与css,并尝试写php
这两天看了一点php,本想着实践一下,发现自己的服务器还没弄好,php的代码只写了两三行嵌在html中,还运行不了,同时还发现自己这几天学的html和css还不够,总是频频出现问题,学习的样式和布局都 ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- [CSS3] 学习笔记-HTML与CSS简单页面效果实例
一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...
- 2017年值得学习的3个CSS特性
原文:https://bitsofco.de/3-new-css-features-to-learn-in-2017/译文:http://caibaojian.com/3-new-css-featur ...
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- 前端学习之路之CSS (四)
Infi-chu: http://www.cnblogs.com/Infi-chu/ CSS盒子模型 概念:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际 ...
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画
最近一直在使用 css-doodle 实现一些 CSS 效果. css-doodle 是一个基于 Web-Component 的库.允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 C ...
- web前端学习(三)css学习笔记部分(1)-- css入门基础知识+基本样式
1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...
- python 学习笔记十二 CSS基础(进阶篇)
1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与 ...
随机推荐
- HDU3394 Railway 题解(边双连通分量)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3394 题目大意: 给定一个无向图,如果从一个点出发经过一些点和边能回到该点本身,那么一路走过来的这些点 ...
- 02_jQuery 验证密码是6位或者8位纯数字
var reg = new RegExp(/^\d{8}$/); //工作密码必须是8位数字 if(!reg.test("12544444").val())) { alert(&q ...
- bootstrap4.4 Stretched link的使用
Stretched link功能介绍:扩大可点击区域. 原理 .stretched-link::after { position: absolute; top: 0; right:0; bottom: ...
- PPP协议 PAP认证
- 源码详解系列(六) ------ 全面讲解druid的使用和源码
简介 druid是用于创建和管理连接,利用"池"的方式复用连接减少资源开销,和其他数据源一样,也具有连接数控制.连接可靠性测试.连接泄露控制.缓存语句等功能,另外,druid还扩展 ...
- C++ | C++ 基础知识 | 类型与声明
一.类型 C++ 包含一整套基本类型,这些类型对应计算机最基本的存储单元并且展现 1.0 布尔值 一个布尔变量(bool)的取值或者是 true 或者是 false,布尔变量常用于表达逻辑运算结果. ...
- react根据传参的不同动态注册不同的子组件
上一篇文章介绍了关于Vue如何根据传参的不同动态注册不同的子组件,实现过程请查阅Vue.extend动态注册子组件,由Vue的这个功能我就自然联想到了使用react该如何实现同样的功能呢.其实,用re ...
- springboot2 + grpc + k8s + istio
项目情况说明: ubuntu - 16.04 springboot - 2.2.2.RELEASE mysql - 5.7 mongodb - 4.0.14 redis - 3.0.6 grpc - ...
- vue+bootstrap4+mybatis分页
先看效果 Springboot+Mybatis+Pagehelper分页具体实现略. Controller返回数据 @GetMapping("/findByPage") publi ...
- numpy基本知识
"""np.arrayobject 数组或嵌套的数列dtype 数组元素的数据类型,可选copy 对象是否需要复制,可选order 创建数组的样式,C为行方向,F为列方向 ...