css3画图那些事(三角形、圆形、梯形等)

闲来无事,写写图形。当时巩固一下css3吧.。前端小白,写的不好还请前辈多指教。

 

三角形

{  width: 0;height: 0;border-bottom: 140px solid red ;border-right: 70px solid transparent;border-left: 70px solid transparent;
}

圆形

{width: 0px;height: 0px;border:50px solid red;border-radius: 50%;
}

梯形

{width: 120px;height: 0px;border-bottom:120px solid red ;border-right: 60px solid transparent;border-left: 60px solid transparent;
}

平行四边形

{width: 0px;height: 0px;border:100px solid red ;transform: skew(30deg);
}

菱形实现方法有很多,这里只是两个三角形合并,也就是正三角和倒三角

.a{width: 0;height: 0;border-bottom: 140px solid red ;border-right: 70px solid transparent;border-left: 70px solid transparent;                            
}
.b{width: 0;height: 0;border-top : 140px solid red;border-left : 70px solid transparent; border-right : 70px solid transparent; }

椭圆形

{
    width: 200px;height: 50px;border:1px solid red;border-radius:100px; 
}

五边形(这里使用一个三角形加一个正方形实现)

    .a{width: 0;height: 0;border-bottom  : 140px solid red;border-left : 70px solid transparent; border-right : 70px solid transparent;                 }.b{width: 140px;height: 140px;display: inline-block;border:1px solid red;background-color: red ;}

贪吃蛇蛇头你敢信?哈哈

 

{width: 0px;height: 0px;border-radius: 50%;border:140px solid red;border-right :140px solid transparent; 
}

 

扇形

 

{width: 0px;height: 0px;border-radius: 50%;border :140px solid transparent; border-bottom:140px solid red;
}

 登录icon(两个div,其中一个div设置一个margin-top的负值,移上来就好了)

 

    .a{width: 0px;height: 0px;border-radius: 50%;border: 30px solid #000;}.b{width: 0px;border: 50px solid #000;border-top-right-radius: 50px;border-top-left-radius: 50px;border-top-width: 25px;border-bottom-width: 25px;}

再来一个小视频 (用4个div拼接起来,两个圆圈,一个长方形,一个梯形就好了)

    .a{    display: inline-block;width: 20px;height: 20px;border-radius: 50%;border: 1px solid #000;}.b{    display: inline-block;width: 30px;height: 30px;border-radius: 50%;border: 1px solid #000;}.c{width: 80px;height: 50px;border: 1px solid #000;border-radius: 10px;}.d{height: 40px;border-right: 30px solid #000;border-top: 16px solid transparent;border-bottom: 16px solid transparent;border-radius: 10px;}<div><div class="a" style="margin-left:160px ;margin-top: 100px;"></div><div class="b" ></div>
</div>
<div><div class="c" style="margin-left:150px ; display: inline-block;vertical-align: top;"></div><div class="d" style="margin-left:0px ; display: inline-block;margin-top: -10px;"></div>
</div>

再来一个垃圾桶 三个图形叠加。正方形,椭圆,和梯形。然后在设置一个倾斜就好了

.a{    width: 0px;height: 0px;border-radius: 4px;border: 8px solid #000;border-top-width: 0;margin-left:164px ;margin-top: 100px;}.b{    width: 0px;height: 0px;border-radius:8px ;border-top: 15px solid #000;border-left: 132px solid #000;margin-left: 108px;}.c{width: 78px;border-bottom-width: 100px;border-top: 100px solid #000;border-left: 18px solid transparent;border-right: 18px solid transparent;}<div style="display: inline-block;transform: rotate(9deg);"><div class="a"></div><div class="b"></div></div><div style="margin-left: 110px; margin-top: 18px;"><div class="c"></div></div>

本文转载于:猿2048➱https://www.mk2048.com/blog/blog.php?id=000bi2j&title=css3画图那些事(三角形、圆形、梯形等)

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

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

相关文章

docker 数据库 mysql_在Docker中体验数据库之MySql

在上一篇在Docker中体验数据库之Mongodb之后&#xff0c;这次记录一下在docker中安装mysql。过程要比Mongodb麻烦一点……参考网址&#xff1a;https://dev.mysql.com/doc/refman/5.7/en/linux-installation-docker.htmlhttps://hub.docker.com/r/mysql/mysql-server/安装过程如…

使用JMeter对异步HTTP / REST服务进行压力/负载测试

尽管我一直在使用JMeter进行Web应用程序的压力测试和负载测试好几次&#xff0c;但我们还是花了一些时间才弄清楚如何使用该工具测试基于异步HTTP / REST的服务。 在我们这里&#xff0c;我是指一名程序员&#xff0c; Holger Staudacher &#xff0c;我很荣幸能与当前的一个项…

web前端学习之ruby标记和rt/rp标记

ruby 标记定义ruby注释&#xff08;中文注音或字符&#xff09;。ruby标记与rt标记一同使用。ruby标记由一个或多个字符&#xff08;需要一个解释/发音&#xff09;和一个提供该信息的rt 标记组成&#xff0c;还包括可选的rp标记&#xff0c;定义当浏览器不支持ruby 标记时显示…

作为一名程序员,聊聊我们的现状和未来

前言&#xff1a;互联网这个高速发展的新兴行业&#xff0c;注定是敢想敢干敢创新&#xff0c;耐劳耐操耐折腾年轻人的天下&#xff1f; 我们所在的互联网行业&#xff0c;不断地有新的公司冒出&#xff0c;有新的商业模式成形&#xff0c;有新的产品形态影响着大家的生活日常&…

ubuntu dhcp ping 不通 自己_??2、DHCP安装和配置

DHCP动态主机设置协议&#xff0c;是一个局域网的网络协议&#xff0c;使用UDP协议工作&#xff0c;可以快速分配IP地址&#xff0c;解决内网IP不足、手动配置IP造成IP冲突以及内网机器多手工配置比较麻烦的问题。1.把win2008和win2003设置同一网段&#xff0c;网络适配器—配置…

选择您的Java EE 6应用服务器

我被问到的第一个问题是&#xff1a;“我们应该使用哪个Java EE应用服务器&#xff1f;”。 随着Java EE 6的日益普及&#xff0c;新的兼容应用程序服务器获得了认证。 当前的官方兼容性和认证矩阵列出了针对完全配置文件&#xff0c;Web配置文件或两者认证的12种不同产品。 如…

HTML表格属性及简单实例

这里主要总结记录下表格的一些属性和简单的样式&#xff0c;方便以后不时之需。 1、<table> 用来定义HTML的表格&#xff0c;具有本地属性 border 表示边框&#xff0c;border属性的值必须为1或空字符串("")。该属性不会控制边框的样式&#xff0c;而是由CSS来…

linux mysql启动_MySQL 安装(二)

MySQL 安装所有平台的Mysql下载地址为&#xff1a;MySQL 下载 . 挑选你需要的 MySQL Community Server 版本及对应的平台。Linux/UNIX上安装MySQLLinux平台上推荐使用RPM包来安装MySQL&#xff0c;MySQL AB提供了以下RPM包的下载地址&#xff1a;MySQL - MySQL服务器。你需要该…

谁在偷你的记忆? 应用服务器版

您创建了一个了不起的应用程序。 您将其投入生产。 您会发现您没有足够的可用内存。 即使您的所有测量结果&#xff08;可能是借助我们的小型公用事业公司进行的测量 &#xff09;都表明您应该还不错。 我们计划发布一系列博客文章&#xff0c;研究堆消失的位置&#xff0c;并…

遗忘的html标签

1 <span>x</span><sup>2</sup><span> y10</span> 2 <br> 3 <span>H</span><sub>2</sub><span>O</span> <sup> 标签可定义上标文本。 包含在 <sup> 标签和其结束标签 …

mysql数据库索引页号为什么从3开始_MySQL数据库快问快答

原标题&#xff1a;MySQL数据库快问快答前言今天楼主给大家列一下关于数据库几个常见问题的要点&#xff0c;如果大家对其中的问题感兴趣&#xff0c;可以自行扩展研究。1. UNION ALL 与 UNION 的区别UNION和UNION ALL关键字都是将两个结果集合并为一个。UNION在进行表链接后会…

java arraylist排序_最全Java集合笔记

集合概述什么是集合集合框架&#xff1a;用于存储数据的容器。集合框架是为表示和操作集合而规定的一种统一的标准的体系结构。任何集合框架都包含三大块内容&#xff1a;对外的接口、接口的实现和对集合运算的算法。接口&#xff1a;表示集合的抽象数据类型。接口允许我们操作…

CachedIntrospectionResults 初始化

转载于:https://www.cnblogs.com/xiluhua/p/7862985.html

为什么有些内联(行内)元素可以设置宽高?

为什么有些内联&#xff08;行内&#xff09;元素如img、input可以设置宽高&#xff1f; 在说明之前我们先来了解一些定义。 块级元素和内联元素&#xff1a; ①块级元素总是独占一行&#xff0c;表现为另起一行开始&#xff0c;而且其后的元素也必须另起一行显示。 宽度(w…

在Eclipse中高效运行HTTP / REST集成测试

最近&#xff0c;我有机会使用由我亲爱的Holger Staudacher编写的OSGi-JAX-RS-Connector库。 通过连接器&#xff0c;您可以通过将Path注释的类型注册为OSGi服务来轻松发布资源-实际上&#xff0c;它工作得很好。 对于我来说&#xff0c;使用普通的JUnit测试编写驱动的服务类测…

Eclipse安装TestNG插件

Eclipse安装TestNG插件 TestNG是什么? TestNG按照其文档的定义是&#xff1a; TestNG是一个测试框架&#xff0c;其灵感来自JUnit和NUnit的&#xff0c;但引入了一些新的功能&#xff0c;使其功能更强大&#xff0c;使用更方便。 TestNG是一个开源自动化测试框架;TestNG表示下…

basicdatasourcefactory mysql_Java基础-DBCP连接池(BasicDataSource类)详解

Java基础-DBCP连接池(BasicDataSource类)详解作者&#xff1a;尹正杰版权声明&#xff1a;原创作品&#xff0c;谢绝转载&#xff01;否则将追究法律责任。实际开发中“获得连接”或“释放资源”是非常消耗系统资源的两个过程&#xff0c;为了解决此类性能问题&#xff0c;通常…

生物神经网络衍生出的算法

一个生物神经网络的基本结构&#xff1a; 生物神经网络由大量神经元组成&#xff0c;这些神经元之间通过突触相互连接。神经元可以接收来自其他神经元的信号&#xff0c;并根据信号的强度和类型来调整自己的输出信号。这种神经元之间的相互连接和信号传递形成了生物神经网络的基…

echart实例数据 本地加载_JVM 类加载概述

来源&#xff1a;SegmentFault 思否社区作者&#xff1a;又坏又迷人JVM简介JVM是Java Virtual Machine(Java虚拟机)的缩写&#xff0c;JVM是一种用于计算设备的规范&#xff0c;它是一个虚构出来的计算机&#xff0c;是通过在实际的计算机上仿真模拟各种计算机功能来实现的。Ja…

高可用集群搭建

高可用集群搭建  创建hadoop账户 创建hadoop账户&#xff08;#注意&#xff0c;接下来的操作均在hadoop账户下运行&#xff09; # useradd hadoop # passwd hadoopsu - hadoopmkdir soft disk1 disk2mkdir -p disk{1,2}/dfs/{dn,nn}mkdir -p disk{1,2}/nodemgr/local 将本地目…