The Shapes of CSS(css的形状)
All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser.
(下面的所有内容只使用一个HTML元素。任何一种CSS都可以,只要它在至少一个浏览器中支持。)
Square (正方形)
#square { width: 100px; height: 100px; background: red; }
Rectangle (长方形)
#rectangle { width: 200px; height: 100px; background: red; }
Circle (圆形)
半圆形(Semicircle)
扇形(Fan-Shaped)
https://www.w3cplus.com/css/create-shapes-with-css
Oval (椭圆形;卵形)
Triangle Up
Triangle Down
Triangle Left
Triangle Right
Triangle Top Left
Triangle Top Right
Triangle Bottom Left
Triangle Bottom Right
Curved Tail Arrow (弯曲的尾巴箭头) via Ando Razafimandimby

Trapezoid(梯形)
Parallelogram(平行四边形)
Star (6-points) (六角星)
#star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; }
#star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; }
Star (5-points) (五角星) via Kit MacAllister

#star-five {
Pentagon (五角形)
Hexagon (六角形)
Octagon (八边形)
Heart (心形) via Nicolas Gallagher
Diamond Square (钻石形) via Joseph Silber
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
Diamond Shield (钻石 盾牌) via Joseph Silber
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
content: '';
position: absolute;
left: -50px; top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
Diamond Narrow via Joseph Silber
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
Cut Diamondvia Alexander Futekov
#cut-diamond { border-style: solid; border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; margin: 20px 0 50px 0; }
#cut-diamond:after { content: ""; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-width: 70px 50px 0 50px; }
Egg (蛋)
Pac-Man (吃豆人)




https://www.w3cplus.com/css/css-simple-shapes-cheat-sheet
Talk Bubble (对话泡泡)
12 Point Burst (12点破裂) via Alan Johnson
8 Point Burst (8点破裂) via Alan Johnson
Yin Yangvia Alexander Futekov (阴阳图)
Badge Ribbon (徽章丝带) via Catalin Rosu
Space Invader (小蜜蜂 太空侵旅者) via Vlad Zinculescu
TV Screen (电视屏幕)
Chevron (V形肩章) via Anthony Ticknor
Magnifying Glass (放大镜)
Facebook Icon (Facebook的图标) via Nathan Swartz
Moon (月亮) via Omid Rasouli

Flag (标志 旗子 ) via Zoe Rooney
Cone (圆锥形) via Omid Rasouli
Cross (十字架) via Kaya Basharan
#cross { background: red; height: 100px; position: relative; width: 20px; } #cross:after { background: red; content: ""; height: 20px; left: -40px; position: absolute; top: 40px; width: 100px; }
Base (垒) via Josh Rodgers
Pointer (指针) via Amsakanna Freethinker
#pointer { width: 200px; height: 40px; position: relative; background: red; } #pointer:after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-left: 20px solid white; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } #pointer:before { content: ""; position: absolute; right: -20px; bottom: 0; width: 0; height: 0; border-left: 20px solid red; border-top: 20px solid transparent; border-bottom: 20px solid transparent; }
表图(chartColorful)
link:https://css-tricks.com/examples/ShapesOfCSS/
The Shapes of CSS(css的形状)的更多相关文章
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- Bulma CSS - CSS类
Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...
- 纯CSS实现tooltip提示框,CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- CSS实现各种形状
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用.以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了.通过使用新的CSS属 ...
- CSS控制鼠标形状
巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式.CSS鼠标样式语法如下:任意标签中插入 style="cursor:*"例 子:<span style=" ...
- css绘制各种形状
代码:http://runjs.cn/code/9lyjtbxl: 效果:http://sandbox.runjs.cn/show/9lyjtbxl <!DOCTYPE html> < ...
- 如何用 CSS 绘制各种形状
自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...
- 我是如何用 CSS 绘制各种形状的
自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...
- div+css实现各种形状(精心整理)
1.正方形.div {width: 100px;height: 100px;background: red;} 2.矩形.div {width: 200px;height: 100px;backgro ...
- 纯css做三角形形状
/* create an arrow that points up */ div.arrow-up { width:0px; height:0px; border-left:5px solid tra ...
随机推荐
- Linux 进程以及多线程的支持
1.最初内核并没有实现对多线程的支持,2.6之后开始以轻量级进程的方式对多线程进行支持(轻量级线程组). a.在2.6 之前,如果需要实现多线程,只能在用户态下实现,用户程序自己控制线程的切换, 实际 ...
- TensorFlow架构与设计:概述
TensorFlow是什么? TensorFlow基于数据流图,用于大规模分布式数值计算的开源框架.节点表示某种抽象的计算,边表示节点之间相互联系的张量. TensorFlow支持各种异构的平台,支持 ...
- PHP之string
string addcslashes() Quote string with slashes in a C style 以 C 语言风格使用反斜线转义字符串中的字符 addslashes() Quot ...
- 利用keepalived构建高可用MySQL-HA
关于MySQL-HA,目前有多种解决方案,比如heartbeat.drbd.mmm.共享存储,但是它们各有优缺点.heartbeat.drbd配置较为复杂,需要自己写脚本才能实现MySQL自动切换,对 ...
- Entwurfsmuster
1 Entwurfsmuster 1.1 Das Begriff Entwurfsmuster (englisch design patterns) sind bewährte Lösungsscha ...
- Nginx 基于客户端 IP 来开启/关闭认证
前些日子帮助公司在搭建了一个内部资源的导航页面,方便公司员工访问各种常用的系统.因为这个页面包含一些敏感信息,我们希望对其做认证,但仅当从外网访问的时候才开启,当从公司内网访问的时候,则无需输入账号密 ...
- Azure 应用服务中的 API 应用、ASP.NET 和 Swagger 入门
学习内容: 如何通过 Visual Studio 2015 中的内置工具在 Azure 应用服务中创建和部署 API 应用. 如何使用 Swashbuckle NuGet 包动态生成 Swagger ...
- 信号量 P V测试详解
信号量 当我们编写的程序使用了线程时,不管它是运行在多用户系统上,多进程系统上,还是运行在多用户多进程系统上,我们通常会发现,程序中存在着一部分临界代码,我们需要确保只有一个进程可以进入这个临界代码并 ...
- 一:Java基础
/-- 第一章:概念 --/ 1.java特点:跨平台.面向对象.开源 2.JVM是Java虚拟机的缩写,可以实现跨平台 3.java运行原理: 1).编写java源文件,以.java作为后缀名 2) ...
- 给<input>文本框添加灰色提示文字
value="你的提示文字" onFocus="if(value==defaultValue){value='';this.style.color='#000'}&quo ...