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;

}

41

50

使用斜杠字符

这种方法使用以下方法：

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

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

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

如果要支持旧版本的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;

}

41

50