html中多边形图形怎么制作,CSS制作图形速查表

news2024/2/26 8:33:10

前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查。别的不多说了,直接看代码。

为了节省时间,下面图形都采用的一个标签,可以是块元素也可以是行内元素,不过行内元素需要加上“display:block;”,唯一不同的是,在此用了不同的类名来区别,相关类名我放在了标题的后面,以便大家对应查看。

1、正方形(square):

CSS Code:

.square {

width: 100px;

height:100px;

background: #E5C3B2;

}

上面的方法是,设置宽度和高度一致就可以实现正方形的效果,下面展示一种boder制作正方形的效果:

.square {

width:0;

height:0;

border: 50px solid #E5C3B2;/*边框大小等于正方形宽度(或高度)的一半*/

}

效果:

d9a3103950877cb1a5483a05a28044f1.png

2、平行四边形(parallelogram)

CSS Code:

.parallelogram {

width: 100px;

height: 70px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

-ms-transform: skew(20deg);

transform: skew(20deg);

background: #E5C3B2;

}

效果:

1006263908da6a573efef4f22b7e8f5b.png

我们可以通过“skew”的值大小来控制角度,如果其值为负值,将会改变扭曲方向:

.parallelogram2 {

width: 100px;

height: 70px;

-webkit-transform: skew(-20deg);

-moz-transform: skew(-20deg);

-o-transform: skew(-20deg);

-ms-transform: skew(-20deg);

transform: skew(-20deg);

background: #E5C3B2;

}

效果:

eefce811a70560e6e465ee80373d6119.png

3、菱形(diamond)

CSS Code:

.diamond {

width: 80px;

height: 80px;

margin: 40px 0 0 40px;

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-transform:rotate(-45deg);

-moz-transform:rotate(-45deg);

-o-transform:rotate(-45deg);

-ms-transform:rotate(-45deg);

transform:rotate(-45deg);

background: #E5C3B2;

}

效果:

a86cbd1d32ffa88b8c015694e768c911.png

4、长方形()

CSS Code:

.rectangle {

width: 100px;

height: 50px;

background: #E5C3B2;

}

效果:

f2491b0f4007e4e92bd1b9d4b565292a.png

5、梯形(trapezoid)

梯形一

CSS Code:

.trapezoid-1 {

height: 0;

width: 100px;

border-bottom: 100px solid #e5c3b2;

border-left: 60px solid transparent;

border-right: 60px solid transparent;

}

效果:

3e37eeae5ebcf4617e0a81f4142ce988.png

梯形二

CSS Code:

.trapezoid-2 {

height: 0;

width: 100px;

border-top: 100px solid #e5c3b2;

border-left: 60px solid transparent;

border-right: 60px solid transparent;

}

效果:

8b79c7c62669544935c47508b5fdcb8f.png

梯形三

CSS Code:

.trapezoid-3 {

height: 100px;

width: 0;

border-right: 100px solid #e5c3b2;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

}

效果:

904e089f8285e7e0acb298191984877a.png

梯形四

CSS Code:

.trapezoid-4 {

height: 100px;

width: 0;

border-left: 100px solid #e5c3b2;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

}

效果:

febd940e7dc9ea52c7ca3c31bdcbcc0b.png

6、三角形(triangle)

三角形朝上

CSS Code:

.triangle-up {

height: 0;

width: 0;

border: 50px solid #e5c3b2;

border-color: transparent transparent #e5c3b2 transparent;

}

效果:

61f6f615930cffcede2484bb56cb7d24.png

三角朝右

CSS Code:

.triangle-rihgt {

height: 0;

width: 0;

border: 50px solid #e5c3b2;

border-color: transparent transparent transparent #e5c3b2;

}

效果:

d1847ecfcdb983ff13b0046d3e3a333a.png

三角朝下

CSS Code:

.triangle-down {

height: 0;

width: 0;

border: 50px solid #e5c3b2;

border-color: #e5c3b2 transparent transparent transparent;

}

效果:

992f35575d52e2fd660689c701db32f3.png

三角朝左

CSS Code:

.triangle-left {

height: 0;

width: 0;

border: 50px solid #e5c3b2;

border-color: transparent #e5c3b2 transparent transparent;

}

效果:

365cf3b02943d8ec69f7d50f6a005082.png

7、半圆(semicircle)

上半圆

CSS Code:

.semicircle-top {

background: #e5c3b2;

height: 25px;

width: 50px;

-moz-border-radius: 50px 50px 0 0;

-webkit-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

}

效果:

a0c8e729c6e5a080983dbe3387be5405.png

右半圆

CSS Code:

.semicircle-right {

background: #e5c3b2;

height: 50px;

width: 25px;

-moz-border-radius: 0 0px 50px 0;

-webkit-border-radius:0 50px 50px 0;

border-radius:0 50px 50px 0;

}

效果:

ec9df7a11688bd53dca9db409f42763d.png

下半圆

CSS Code:

.semicircle-down {

background: #e5c3b2;

height: 25px;

width: 50px;

-moz-border-radius:0 0 50px 50px;

-webkit-border-radius:0 0 50px 50px;

border-radius:0 0 50px 50px;

}

效果:

70e69b4a236adf1f5d57b8588a8f85e2.png

左半圆

CSS Code:

.semicircle-left {

background: #e5c3b2;

height: 50px;

width: 25px;

-moz-border-radius:50px 0 0 50px;

-webkit-border-radius:50px 0 0 50px;

border-radius:50px 0 0 50px;

}

效果:

9647ff2921e79507892b64c7e9051dbf.png

8、圆(circle)

CSS Code:

.circle {

background: #e5c3b2;

height: 50px;

width: 50px;

-moz-border-radius: 25px;

-webkit-border-radius:25px;

border-radius: 25px;

}

效果:

cf836033435ff2662971335d9dc25146.png

9、椭圆(oval)

水平椭圆

CSS Code:

.ovalHor {

background: #e5c3b2;

height: 40px;

width: 80px;

-moz-border-radius: 40px/20px;

-webkit-border-radius:40px/20px;

border-radius: 40px/20px;

}

效果:

de988a60bf44e87ef6621d683262cb4c.png

垂直椭圆

CSS Code:

.ovalVert {

background: #e5c3b2;

height: 80px;

width: 40px;

-moz-border-radius: 20px/40px;

-webkit-border-radius:20px/40px;

border-radius: 20px/40px;

}

效果:

f2c18639e23a6dfb783bc21de4b17f65.png

10、表图(chartColorful)

CSS Code:

.chartColorful {

height: 0px;

width: 0px;

border: 50px solid red;

border-color: purple red yellow orange;

-moz-border-radius: 50px;

-webkit-border-radius:50px;

border-radius: 50px;

}

效果:

a1dbbf2d55b547285042516bc0e06438.png

11、四分之一圆(quarterCircle)

四分之一圆(上)

CSS Code:

.quarterCircleTop {

background: #e5c3b2;

height: 50px;

width: 50px;

-moz-border-radius: 50px 0 0 0;

-webkit-border-radius: 50px 0 0 0;

border-radius: 50px 0 0 0;

}

效果:

550f26158d8078fd51ca10c6bfc6960b.png

四分之一圆(右)

CSS Code:

.quarterCircleRight {

background: #e5c3b2;

height: 50px;

width: 50px;

-moz-border-radius: 0 50px 0 0;

-webkit-border-radius: 0 50px 0 0;

border-radius:0 50px 0 0;

}

效果:

c39d25e757b9e94de9ee171770c6f810.png

四分之一圆(下)

CSS Code:

.quarterCircleBottom {

background: #e5c3b2;

height: 50px;

width: 50px;

-moz-border-radius: 0 0 50px 0;

-webkit-border-radius: 0 0 50px 0;

border-radius:0 0 50px 0;

}

效果:

8afacaa496c4f18409fe1c1f7dc688aa.png

四分之一圆(左)

CSS Code:

.quarterCircleLeft {

background: #e5c3b2;

height: 50px;

width: 50px;

-moz-border-radius: 0 0 0 50px;

-webkit-border-radius: 0 0 0 50px;

border-radius:0 0 0 50px;

}

效果:

5f4c897339fe69415bb57d9f9ed98ba9.png

12、Chart(quarterCircle)

Chart(上)

CSS Code:

.chartTop {

height: 0px;

width: 0px;

border:50px solid #e5c3b2;

border-top-color: transparent;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

效果:

50e3a8345f893363446524a4aea7c0f1.png

Chart(右)

CSS Code:

.chartRight{

height: 0px;

width: 0px;

border:50px solid #e5c3b2;

border-right-color: transparent;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

效果:

07526fc11f723ac8e4f8b5cfac35a87d.png

Chart(下)

CSS Code:

.chartBottom {

height: 0px;

width: 0px;

border:50px solid #e5c3b2;

border-bottom-color: transparent;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

效果:

73d93f6bbc77162203f69f799c96d72d.png

Chart(左)

CSS Code:

.chartLeft {

height: 0px;

width: 0px;

border:50px solid #e5c3b2;

border-left-color: transparent;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

效果:

9716f0e21db17847f91672968e3e750a.png

13、心形(heart)

左心形

CSS Code

.heartLeft{

width: 0;

height: 0;

border-color: red;

border-style: dotted;

border-width: 0 40px 40px 0;

}

效果:

b9c1511a31840edb0e42b275bf289daf.png

右心形

CSS Code

.heartRight{

width: 0;

height: 0;

border-color: red;

border-style: dotted;

border-width: 0 0 40px 40px;

}

效果:

7cfdce45998e3898ce6f1bab3cd1feb8.png

14、彩带(ribbon)

CSS Code

.ribbon {

width: 0;

height: 100px;

border-left: 50px solid red;

border-right: 50px solid red;

border-bottom: 35px solid transparent

}

效果:

46914bde372ab52b55f9301b10b57be6.png

上面就用CSS制作的32种图形效果,当然大家还可以发挥你的想像和创造,制作一些更精美的图形。

扩展阅读:

那么今天就说到这里了,如果大家有更多的效果制作方法,请在下面的评论中分享。

如需转载烦清注明出处:W3CPLUS

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

如若内容造成侵权/违法违规/事实不符,请联系七分地网进行投诉反馈,一经查实,立即删除!

相关文章

unity学习

2019独角兽企业重金招聘Python工程师标准>>> 1.发布ios应用的时候会生成一个xcode工程。已经发布过ios,再次发布的时候可以选择replace 或者是append原xcode工程。如果ios工程是不同unity版本创建的,那么不能append。但是如果我们修改过ios的…

腾讯AI击败王者荣耀职业队,全靠自学、策略清奇,一天训练量为人类440年

问耕 发自 麦蒿寺量子位 出品 | 公众号 QbitAI王者峡谷,风云突变。一场激烈的对战正在进行,左侧是五位人类职业电竞高手组成的赛区联队,另一方是……嗯?他们的对手没有出场?五个座椅空空荡荡?不。他们的对手…

mfc 内嵌 本地html,MFC程序中内嵌网页,附示例工程

最近在课程设计,因为小悠太懒了,是在不想用C完成一些简单的文件上传下载操作,于是就想着将网页内嵌到程序中,上传下载神马的就直接使用网页Web来完成就好了,本示例中将演示在MFC程序中内嵌一个html网页介绍一下原理首先…

最高5000倍加速模拟物理世界,育碧在修复bug上又进一步

晓查 发自 凹非寺量子位 出品 | 公众号 QbitAI“买bug送游戏”对育碧游戏的玩家来说简直是常态。即使是育碧的当家游戏《刺客信条》、《孤岛惊魂》系列也是bug也是多到令人发指。比如《刺客信条:大革命》中,主角的脸部建模突然失控,变成一张“…

AI帮你靠“想象”打字:手机电脑软键盘也能盲打了,准确率能达到95%

铜灵 发自 凹非寺量子位 出品 | 公众号 QbitAI有了机器学习,没有软键盘还能照样打字。凭啥?凭想象。来自韩国科学技术高级研究院在一项最新研究中,提出了一种完全靠想象的键盘:I-Keyboard,这个界面上看不到软键盘上的字…

php curl 内容采集

2019独角兽企业重金招聘Python工程师标准>>> function contentCollection($url){$data array(list>null,status>0);if(!$url){$data[info] 请传入采集地址;return $data;}if(!preg_match("/^http/", $url)){$url http://.$url;}preg_match("…

文科生如何入门机器学习:先看看这篇零基础教程,再多算几遍吧

晓查 发自 凹非寺量子位 出品 | 公众号 QbitAIAI技术变得越来越热门,很多人开始转行进入这一领域,其中当然也不乏文科生。他们在普遍缺乏大学数学知识的情况下,就不能入门机器学习了吗?最近有位Reddit网友David Code,他…

B站最火数学视频3Blue1Brown是如何制作的

授权转发自 知乎网友 李狗嗨原文地址:https://www.zhihu.com/question/57357012/answer/723888621相信很多人都知道3Blue1Brown,这是一个由斯坦福大学的数学系学生Grant Sanderson 创建的YouTube 频道。该频道从独特的视觉角度解说高等数学,内…

计算机硬件与游戏发展史,电脑硬件的发展历程中 什么是电竞SSD?

原标题:电脑硬件的发展历程中 什么是电竞SSD?身处21世纪的人们,早已经习惯了各类电子设备的充斥,并全方位的体验着智能设备所带来的便利。那么,我们平常所熟知的计算机设备,到底由那些重要部件组成&#xf…

滴滴正式分拆无人车业务,复刻Uber上市路径,传孙正义再加持

李根 发自 凹非寺 量子位 报道 | 公众号 QbitAI滴滴无人车,终于也官宣分拆了。今天(8月5日)滴滴出行宣布旗下自动驾驶部门,升级为独立公司,专注于自动驾驶研发、产品应用及相关业务拓展。滴滴出行CTO张博兼任自动驾驶新…

unity3d 动画中断并重新播放的解决办法

为什么80%的码农都做不了架构师?>>> 如果想中断某个正在播放的动画,然后重新播放? 比如玩家被敌人击中了,正在播放被击中的动画,不巧紧接着玩家又被敌人击中一次,此时就得中断动画并重新播放。…

BAT华为美团头条面试考什么?这份GitHub万星资源,告诉你面试题+答案+出题人分析...

铜灵 发自 凹非寺量子位 出品 | 公众号 QbitAI2020校招脚步临近,怎样备战即将到来的面试,在众多面试者中脱颖而出惊艳到面试官,化身大厂Offer收割机?GitHub上就有这样一个万星资源,整理了BAT华为、滴滴、头条等大厂可能…

FILO微型计算机,IBM-PC微机组成原理(ppt48)-咨询报告【PPT课件】

IBM-PC微机组成原理(ppt48)-咨询报告【PPT课件】2020-09-24 08:52:06【导读】微型计算机中的中央处理器也叫微处理器。运算器和控制器。件完成指定功能的各项操作。主存储器是用于存放程序和数据的部件。对每个存储单元内容的存和取是按照地址进。储一个二进制数0或1。每8位组成…

免费机器学习课程爆红:从概率与统计到全栈深度学习,英伟达工程师小姐姐整理...

乾明 发自 凹非寺 量子位 报道 | 公众号 QbitAI有一份适合按顺序依次学习的免费机器学习资源,在Twitter上火了。一天之间便获得5.9K点赞和1.5K转发。评论区中,”Thanks for sharing“此起彼伏,还有不少人呼朋唤友来观看。那么,这到…

[怪谈]唯有数学不会因时代的变迁而没落

前几天有个网友告诉我:数学在编程过程中完全没有用。我没反驳他,今天放出一篇“扯淡“文,来给大家洗洗脑。好多年前,我在某个公司做兼职顾问时,曾经给当时的老板扯淡过一个理论,当然那时还小小的杜撰了一篇…

GitHub趋势榜第一:用小姐姐自拍,生成二次元萌妹子,神情高度还原,反过来也可以...

栗子 发自 凹非寺量子位 报道 | 公众号 QbitAI如何能让一个小姐姐属于你?把她变成二次元的人类,就可以解锁一个老婆了。韩国游戏公司NCSOFT,最近开源了一只技艺精湛的AI。只要任意输入小姐姐的自拍,就能得到她在二次元的样子了&am…

围剿Sci-Hub力度升级!全球最大学术出版商:网址你也不要提,不然就发律师函...

鱼羊 晓查 发自 凹非寺量子位 出品 | 公众号 QbitAI全球最大学术出版商Elsevier再惹争议,他们又把枪口对准了提供论文免费下载的Sci-Hub。而且, 颇有“赶尽杀绝”的意味。提供文献整理工具的Citationsy发表博客文章表示,因为自己在博客中提供…

给Python加Markdown式排版,在线运行可做Jupyter替身丨谷歌大脑出品

郭一璞 发自 凹非寺 量子位 报道 | 公众号 QbitAIPython代码,现在可以直接排版了。前提是你装了这个名叫Python Handout的工具,只要敲代码,就能在任何文本编辑器里方便的转换成标题、代码、文本等各种样式,还能直接运行处Python代…

sim卡移动端漏洞解析

2019年下半年以来,伴随着两个核弹级Sim卡漏洞披露,多个Android和IOS漏洞的曝光,关于对应漏洞的移动设备武器又将纳入各国网络武器库,而需要注意的是,其中有多个漏洞已经被武器化且被利用。 奇安信威胁情报中心红雨滴安…