CSS:两种方式画一个梯形

在html网页设计中，常会结合css绘制一些简单的形状，当然除简单的矩形之外，最近在网页设计过程中，我遇到了要画一个梯形的需求，经过学习之后，总结两种方式画一个梯形，这里只是针对梯形，其他情况另作参考。

1. 利用border加粗方式

这是网上较为常见的方式，其原理就是对一个高度为0px的正方形的div的border-top进行增粗。

理解代码：

建立一个div,高度为0,宽度400px（可以理解为一个矩形，但矩形的高度为0，自然这个矩形就这垂直方向压缩成了一条线），div上边界粗度或厚度设为100px且为实线，左右边界线厚度也为100px，但设为透明（利用了css的transparent属性）

原理：

先看两幅图：

CSS:两种方式画一个梯形相关推荐

OpenGLES两种方式画立方体
OpenGlES,终于能把这东西画出来其实两种方法都是画12个三角形画出来的,在OpenGL ES中,只支持三角形,所以任何复杂多边形都是由三角形画出来的. 第一种:顶点法 : 把一个四边形当成一个 ...
java提交数据到另一个页面_JS实现把一个页面层数据传递到另一个页面的两种方式...
由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递 ...
c语言向文件中写入字符串_C语言中定义字符串的两种方式及其比较
先看如下代码: 以上用两种方式定义一个字符串: 1.定义一个char * 类型指针,指向字符串首字符首地址. 2.定义一个数组,数组里存放元素为字符串各个字符+'0',其中'0'为码0值,编译器会自动 ...
Spring定义Bean的两种方式：＜bean＞和@Bean
前言: Spring中最重要的概念IOC和AOP,实际围绕的就是Bean的生成与使用. 什么叫做Bean呢?我们可以理解成对象,每一个你想交给Spring去托管的对象都可以称之为Bean. 今天通过S ...
java 读取css文件_java文件读取的两种方式
JAVA中读取文件(二进制,字符)内容的几种方 JAVA中读取文件内容的方法有很多,比如按字节读取文件内容,按字符读取文件内容,按行读取文件内容,随机读取文件内容等方法,本文就以上方法的具体实现给出代 ...
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
通过CSS实现文字渐变色的两种方式
说明这次的重点就在于两个属性, background 属性 mask 属性这两个属性分别是两种实现方式的关键. 解释方式一效果图代码 <!DOCTYPE html> < ...
css如何画一个梯形
要用 CSS 画一个梯形,你可以使用伪元素和 CSS 三角形. 首先,你需要在 HTML 中创建一个空的容器元素,比如一个 div.然后,在 CSS 中为该元素添加两个伪元素,使用 ::before ...
如何将横向滚动条加粗css,css实现横向滚动条的两种方式（代码实例）
本章给大家介绍用css实现横向滚动条的两种方式.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. html代码: 全部 Adobe 微软会计绘画 Adobe 微软会计绘画一. ...
vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...

CSS:两种方式画一个梯形

1. 利用border加粗方式

CSS:两种方式画一个梯形相关推荐

最新文章

热门文章