CSS 如何用border绘制三角形、等腰梯形、直角梯形
CSS 如何用border绘制三角形、等腰梯形、直角梯形
border 有宽度后，四角交接处会产生斜线，可根据此原理绘制三角形、等腰梯形、直角梯形等图形。
div {width: 50px;height: 50px;border-width: 50px;border-style: solid;/* border-color: 上 右 下 左; */border-color: pink green blue gold;}
border 绘制三角形 （将div中内容设置为0即宽高为0，可出现4个不同方向三角形）
div {width: 0;height: 0;border-width: 100px;border-style: solid;/* border-color: 上 右 下 左; */border-color: pink green blue gold;}
根据所需，将其他三个边框隐藏即可得到以下三角形
div {width: 0;height: 0;border-width: 100px;border-style: solid;border-color: transparent transparent blue transparent;}
border 绘制等腰梯形 （在绘制好三角形后如上图，将div内容的宽度设置一下，可得到一个等腰梯形，如对梯形宽度有需求，需注意内容的宽度与边框宽度）
div {width: 100px;height: 0;border-width: 0 50px 100px 50px;border-style: solid;border-color: red transparent blue transparent;}
border 绘制直角梯形 （去掉上边框和左边框宽度，添加内容宽度，即可得到直角梯形）
div {width: 150px;height: 0;border-width: 0 50px 100px 0;border-style: solid;border-color: transparent transparent red transparent;}
CSS 如何用border绘制三角形、等腰梯形、直角梯形相关推荐
- border绘制三角形
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- html样式border倒三角写法,纯CSS - border绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 如何用HTML编写长方体框架,直角梯形长方体形状_html_开发99编程知识库
不需要額外的形狀元素 形狀可以創建僅包含該 :左側是創建的div left,top和bottom邊框. 右側是由 :before及其上,右和底部邊框 跨越加入兩個框創建的 :after感謝 skewY ...
- CSS：N种使用CSS 绘制三角形的方法
目录 6种使用 CSS 实现三角形的技巧 1.使用 border 绘制三角形 2.使用 linear-gradient 绘制三角形 3.使用 conic-gradient 绘制三角形 4.transf ...
- CSS 绘制三角形的方法
目录 1.使用 border 绘制三角形 2.使用 linear-gradient 绘制三角形 3.使用 conic-gradient 绘制三角形 4.transform: rotate 配合 ove ...
- 【图形基础篇】04 # GPU与渲染管线：如何用WebGL绘制最简单的几何图形？
说明 [跟月影学可视化]学习笔记. 图形系统是如何绘图的? 一个通用计算机图形系统主要包括 6 个部分,分别是: 输入设备 中央处理单元:首先,数据经过 CPU 处理,成为具有特定结构的几何信息. 图 ...
- 使用border属性绘制三角形、五角星、心形
1. 绘制三角形 <p>直角三角形</p> <section class="triangle1"><style>#triangle1 ...
- css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
- CSS绘制三角形图标
CSS绘制三角形图标目录 1CSS绘制三解形图标原理 2 页面效果 3 HTML结构 4 CSS样式 1CSS绘制三解形图标原理 对内容容器进行相对定位,对内容容器的伪元素:before和:after ...
最新文章
- 基于nginx的tomcat负载均衡和集群(超简单)
- [trustzone]-ARM Trustzone架构下的软件框图
- java update多个字段的值_SQL的update多个字段的写法
- 如何当好PM？请求大家积极讨论
- 数据结构：四种排序的比较
- 非proguard无法发现jar(已编译)的外部引用错误，(javac + proguard 则会检查)
- Window 转Linux 后感
- logstash的使用教程
- 粒子群算法tsp java_粒子群算法解决TSP问题
- shiro(1) 介绍
- RxJava Agera 从源码简要分析基本调用流程(2)
- Spring Cloud构建微服务架构：服务注册与发现（Eureka、Consul)
- 小程序升级服务器内存需要注意什么,小程序服务器内存需要多大
- python京东预约抢购流程_[Python] 京东秒杀商品抢购-茅台抢购自动获取抢购时间【修改】...
- Scala：类，对象和特征（接口）
- 翻译：控制容器的反转IoC和依赖注入模式DIP 概念发源地 Martin Fowler
- c语言编写的小游戏(c语言编写小游戏入门)
- python如何实现数据可视化,如何用python做可视化
- 【MOS管】基础知识和简易电路
- 七大江河水系－－长江(二)