成都网站建设设计

将想法与焦点和您一起共享

怎么用CSS实现三角形标记

这篇文章主要介绍怎么用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实现三角形标记”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


当前名称:怎么用CSS实现三角形标记
分享地址:http://chengdu.cdxwcx.cn/article/gdihis.html

其他资讯