无穷 html 字符,html – CSS中的无穷大符号

CSS

通过使用伪元素,您可以创建形状的两侧,从而获得所需的输出.

所有浏览器都支持此解决方案.

div {

position: relative;

width: 178px;

height: 100px;

}

div:before,

div:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 60px;

height: 60px;

border: 10px solid black;

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

transform: rotate(-45deg);

}

div:after {

left: auto;

right: 0;

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

transform: rotate(45deg);

}

如果你想要它更加匀称,对边界半径规则的一些修改确实有助于给它更多的形状.

div {

position: relative;

width: 178px;

height: 100px;

}

div:before,

div:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 60px;

height: 60px;

border: 10px solid black;

border-radius: 80% 0 55% 50% / 55% 0 80% 50%;

transform: rotate(45deg);

}

div:after {

left: auto;

right: 0;

transform: rotate(-135deg);

}

SVG

SVG代表可伸缩矢量图形. Web浏览器将其视为图像,但您可以在SVG中添加文本和普通HTML元素.

所有浏览器都支持它,如下所示：CanIUse

帆布

Canvas类似于SVG,但使用栅格(基于像素)而不是矢量来创建形状.

Canvas的浏览器支持是quite good.

var shape = document.getElementById('infinity').getContext('2d');

shape.lineWidth = 6;

shape.strokeStyle = "#333";

shape.beginPath();

shape.moveTo(100, 100);

shape.bezierCurveTo(200, 0, 200, 200, 100, 100);

shape.bezierCurveTo(0, 0, 0, 200, 100, 100);

shape.closePath();

shape.stroke();

HTML

从近似重复的答案中可以看出,这是所有HTML替代品的积累.

我只为规范添加了这个,并向用户显示HTML实体可以实现形状.

p {

font-size: 2em;

}

∞

无穷 html 字符,html – CSS中的无穷大符号相关推荐

Jquery与CSS中的大于符号
在Jquery中,使用大于号选择符,表示在第一级子元素中查找元素例如: $('#content>div') 表示查找第一级子元素中的div,例如在 1 <div>1 2 <d ...
css中字体之间的距离是什么意思,css字符间距(css文字间距怎么设置)
怎么样控制字和字之间的间距,而不是行间距. 在需要设置的CSS标签下加入一下代码即可.word-spacing:8px;letter-spacing: 1px; line-height:25px是绝对 ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
css中font-family的中文字体
说到css中的font-family,相信很多朋友经常用,但不知道当你遇到引用中文字体的时候你会怎么写? 最近特别关注了下,发现最常用的基本有三种类型: 1.直接中文: 2.英文形式: 3.unico ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
css中的white-space属性
css中的white-space用来处理布局过程中元素内的空白符. white-sapce: normol: 默认值,空白会被浏览器忽略. <html><head><ti ...
彻底弄懂css中单位px和em,rem的区别
2019独角兽企业重金招聘Python工程师标准>>> rem: rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem ...
css中的px、em、rem 详解
概念介绍: 1.px (pixel,像素): 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印 ...
知方可补不足～CSS中的几个伪元素
对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了. 今天我们来说几个CSS中的伪元素,它们在 ...

无穷 html 字符,html – CSS中的无穷大符号

无穷 html 字符,html – CSS中的无穷大符号相关推荐

最新文章

热门文章