html怎么画正方形的斜线,html

使用倾斜变换

这种方法使用以下方法：

>具有变换的伪元素：skew(-45deg),其边框左边产生类似于斜杠字符的行.

>包含数字的两个跨度的绝对定位.像跨度的分子相对于左上方定位,而分母像跨度相对于右下方定位.

这种方法的一个潜在缺点是如果您想要支持IE8和更低版本的浏览器支持.

.Box {

position: relative;

height: 150px;

width: 150px;

}

.top,.bottom {

position: absolute;

font-weight: bold;

}

.top{

top: 0px;

left: 0px;

font-size: 100px;

}

.bottom {

bottom: 0px;

right: 0px;

font-size: 25px;

}

.Box:after {

position: absolute;

content: '';

bottom: 0px;

right: 0px;

height: 60%;

width: 0%;

border-left: 1px solid;

transform: skew(-45deg);

transform-origin: top left;

}

使用斜杠字符

这种方法使用以下方法：

>产生斜线的正常斜杠字符.

>具有显示属性的容器元素设置为内联块,用于数字和斜杠字符.

>对每个容器进行适当的垂直排列设置,使其看起来像分数.

如果要支持旧版本的IE,这种方法是有利的.缺点是斜线字符不能很好地控制斜线的角度.

.top {

font-size: 50px;

vertical-align: top;

margin-top: 10px;

}

.bottom {

font-size: 25px;

vertical-align: bottom;

margin-bottom: 20px;

}

.line {

font-size: 100px;

vertical-align: middle;

}

.top,.bottom{

font-weight: bold;

}

.Box * {

display: inline-block;

}

41/50

注意：在第二个片段中是为了避免内联块元素之间的额外空间.

使用渐变

这种方法使用以下方法：

>倾斜线性梯度设置为父框容器的背景.

>具有显示属性的容器元素设置为数字的内嵌块以及适当的垂直对齐设置.

这种方法的优点是它不使用任何额外的实际/伪元素.缺点是浏览器对渐变的支持相对较低.

.Box {

height: 125px;

width: 125px;

font-size: 100px;

background: linear-gradient(to top left,transparent 49.5%,black 49.5%,black 50.5%,transparent 50.5%);

background-size: 75% 75%;

background-position: 100% 100%;

background-repeat: no-repeat;

}

.top {

font-size: 75px;

vertical-align: top;

margin-top: 10px;

}

.bottom {

font-size: 25px;

vertical-align: bottom;

margin-left: -10px;

}

.Box * {

display: inline-block;

font-weight: bold;

}

html怎么画正方形的斜线,html – 斜线的样式相关推荐

用python的turtle画正方形内切圆_Python 用turtle实现用正方形画圆的例子
最近发现一个很有意思的画图的python库,叫做turtle,这里先说下用turtle这个库来实现用正方形画圆的思路. 每次都用乌龟(turtle) 来画出一个正方形,然后通过旋转3°后,继续画一样的 ...
turtlesim画正方形代码对比
ROS1/2主题/服务/行动基础类turtlesim阶段测试公开题画正方形或者其他形状有两类实现方式: 1 ☞ #include <boost/bind.hpp> #include &l ...
python画正方形-用python画正方形
广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 我正在学习python学习教程,我无法打开屏幕进行绘图. 我没有发现错误,它只是 ...
python画正方形并涂色_这种图片怎么用python画出来，每一个数字代表一种颜色?...
Python 画正方形,写数字的代码如下: from PIL import Image, ImageDraw, ImageFont, ImageFilter WIDTH = 100 * 4 HEIGH ...
canvas画正方形、三角形以及虚线
1.画正方形代码如下 <style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/} < ...
python画正方形的代码_python画正方形的代码是什么？
python画正方形的代码是什么? python画正方形的代码是:import turtle #导入 turtle.title("画正方形") turtle.pensize(5) ...
opengl入门基础-画正方形
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.运行环境二.opengl画正方形三.步骤代码下载一.运行环境 windows visual studio 291 ...
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
vue3.0 + typescript openlayers实现地图标点.移动.画线.显示范围.测量长度.测量面积.画三角形.画正方形.画圆.线选.画笔.清除测量.清除地图所有等功能由于最近项目中用 ...
【Scratch案例实操】Scratch画正方形 scratch编程案例教学 scratch创意编程少儿编程教案
案例名称:画正方形学习目标: 掌握角色导入.和基本设置掌握画笔的使用,画笔颜色.粗细以及画笔清除,通过使用抬笔和落笔绘制想要的图形学会数学几何知识正方形及其特点熟练掌握循环模块下的" ...
小学生python入门-画正方形-小学生 Python 入门课
画正方形还没开始学就要画正方形啊!会不会太难啊? 今天主要是教大家简化版的程序设计流程,其实和大家在日常生活中做的事情是一样的. 第一步:准备画画的工具包(纸和铅笔) 用Python代码就是导入工具 ...

html怎么画正方形的斜线,html – 斜线的样式

html怎么画正方形的斜线,html – 斜线的样式相关推荐

最新文章

热门文章