这篇文章主要介绍怎么用CSS实现三角形标记,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
我们注重客户提出的每个要求,我们充分考虑每一个细节,我们积极的做好网站制作、网站设计服务,我们努力开拓更好的视野,通过不懈的努力,创新互联赢得了业内的良好声誉,这一切,也不断的激励着我们更好的服务客户。 主要业务:网站建设,网站制作,网站设计,微信平台小程序开发,网站开发,技术开发实力,DIV+CSS,PHP及ASP,ASP.Net,SQL数据库的技术开发工程师。
代码如下:
CssMark.html
CssMark.css
.TriMarkPre0{
position:static;
width:100px;
height:100px;
border:10pxsolidtransparent;
border-color:#0058e2;
}
.TriMarkPre1{
position:static;
width:100px;
height:100px;
border:10pxsolidtransparent;
border-left-color:#0058e2;
}
.TriMarkPre2{
position:static;
width:0px;
height:0px;
border:10pxsolidtransparent;
border-left-color:#0058e2;
}
.TriMark{
position:static;
width:0px;
height:0px;
border:5pxsolidtransparent;
border-left-color:#0058e2;
}
代码详解
创建流程1:
下面的代码是绘制100x100像素区域的外框的代码。这是一般代码。
执行结果图像顶部的方框对应于该代码。
.TriMarkPre0{
position:static;
width:100px;
height:100px;
border:10pxsolidtransparent;
border-color:#0058e2;
}
创建过程2:
使用下面的代码,仅绘制区域框架的左侧。如果您绘制左侧,您可以看到拐角部分是对角切割的。(当绘制4个边时,只绘制一半以使每条线不重叠。)
此代码对应于将执行结果图像的第二个梯形向侧面的代码。
.TriMarkPre1{
position:static;
width:100px;
height:100px;
border:10pxsolidtransparent;
border-left-color:#0058e2;
}
完成:
可以使用以下代码绘制三角形标记。
通过减小前一行左侧代码的高度,行之间的部分将消失,它将显示为三角形标记。
执行结果图像的第三个图对应于该代码。
.TriMarkPre2{
position:static;
width:0px;
height:0px;
border:10pxsolidtransparent;
border-left-color:#0058e2;
}
您可以通过减小线的边框宽度来更改三角形标记的大小。
执行结果图像的第四个图对应于该代码。
.TriMark{
position:static;
width:0px;
height:0px;
border:5pxsolidtransparent;
border-left-color:#0058e2;
}
以上是“怎么用CSS实现三角形标记”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!